## DEV Community is a community of 698,340 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

# Day 8 of #100DaysOfCode!

Christian Falucho
Passionate about building websites and web applications that can be used by millions of people. I hope to build tools that can help people.

## Today's progress

I worked on some exercises on the `array.map()` method from freeCodeCamp.

## What I learned

So what is the `map()` method? The `map()` method allows you to iterate over an array and modify it using a callback function on each element and returning a new array, with transformed elements. This way you get an entirely new array and an untouched original array.

Assume we have an array of numbers and for each element inside the array we want to multiply it by 5. Now we can do this using a `for loop`. Like the example below.

``````let numbers = [1, 2, 3, 4]

for(let i = 0; i < numbers.length; i++{
console.log(numbers[i] * 5);
}

//output: [5, 10, 15, 20]
``````

Similarly, we can achieve the same result using the `map()` method.

``````let numbers = [1, 2, 3, 4]

let newNumbers = numbers.map(function(element){
return element * 5;
}

console.log(newNumbers);
//output: [5, 10, 15, 20]
``````

In the example above, the `callback function` is called on each `element` (current value) of the array and multiply each of the element by 5 and returns a `new element` (new value) and adds it into the new array `let newNumbers`.

## Filling in the gaps

The complete syntax for the `map()` method is:

``````arr.map(function callbackFn(element, index, array))
``````

The `function callbackFn()` is called on each array element, and the `map()` method always passes the `current element`, the `index` of the current element and the whole `array` of the object.

#### Using map() on an array of objects

Imagine we have an array of objects that stores the `make`, `model`, and `year` of cars.

###### array of objects
``````let cars = [
{make: "Lexus", model: "IS 250", year: "2014"},
{make: "Honda", model: "Accord", year: "2020"},
{make: "Toyota", model: "Camry", year: "2012"},
{make: "Tesla", model: "Model S", year: "2017"}
]
``````

But we only want to return an array of the car's `make` and `model`. Well, we can do that by using `map()` method, process the current element through the `function`, and return the element's property value to add to the new array.

###### Example below uses ES6 syntax
``````let carsArr = cars.map(function(element){
return `\${element.make} \${element.model}`
})

console.log(carsArr)

//output: ["Lexus IS 250", "Honda Accord", "Toyota Camry", "Tesla Model S"]
``````

We use the `callback function` on each element of `cars` and every time the function is executed, the return values, which in this case are `make` and `model` are added into `carsArr`. Now when we `console.log(carsArr)` we get the following output on our console. `["Lexus IS 250", "Honda Accord", "Toyota Camry", "Tesla Model S"]`.

## Simply put

Using the `map()` method is beneficial when you want to iterate through an array or arrays of objects, apply changes to its `elements` and have it return a new array.