Day 8 of #100DaysOfCode!

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.