what is array map() in JavaScript

map() allows you to make changes to every element in an array without modifying the original array.

A function that is executed for every element in the array is passed into map() which has these parameters:

An example of using map() would be to multiply every element in an array by 10.

JavaScript

const numbers = [1, 2, 3, 4, 10];

// a new array is made with ever number in the original array multiplied by 10
const numbersMultipliedBy10 = numbers.map(number => {
    return number * 10;
});

console.log(numbers); // [3, 10, 40, 3]
console.log(numbersMultipliedBy10); // [10, 20, 30, 40, 100]

Another example is converting an array of data into JSX.

JavaScript

const food = [
    { id: 0, name: 'orange', color: 'orange' },
    { id: 1, name: 'banana', color: 'yellow' }
];

food.map(food => {
    return (
        <div key={food.id}>
            <div>
                {food.name} - {food.color}
            </div>
        </div>
    );
});

summary of map()

Use map() when something needs to be done on every element in an array.

javascript
what is array reduce() in JavaScript

reduce() method combines an array into one value

html
css
javascript
Github Remote Repositories

When we want to publish our code online (save it on the cloud so we can access it from any device), we want to store it in a remote repository.