DEV Community

loading...

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.
・2 min read

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

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"}
]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)