🟨JavaScript map()

performing an operation on each element in an array

The word map() has to do with taking a set of values, then performing an operation to each of them, much like what a geographical map does:

• takes a real world set of places ("data points")

• (attempts to) represent each point on a representative surface with some scaled factor

Motivation

Suppose we have an array and we wish to go through its elements, then perform the same operation on those elements...

We could use the built-in map() function to iterate and transform:

// an array of grades in a class
const grades = [72, 75, 90, 91, 92, 92, 93, 94]

// everyone's grades go up by 10%
const bellCurve = grades.map((grade) => grade + 5)

console.log(grades) 
// [72, 75, 90, 91, 92, 92, 93, 94]
// i.e. the original array does not change

console.log(bellCurve)
// [77, 80, 95, 96, 97, 97, 98, 99]
// the map creates a new array, separate from the "real world"

Addition

In addition to the current element of the iteration, the mapmethod also has two optional parameters:

• the index of the current element

• the original array showing all the elements

For example, we could provide more detail to the message logged to the console:

const grades = [72, 75, 90, 91, 92, 92, 93, 94]

const bellCurve = grades.map((grade, index, array) => {
    if (index === 0) console.log(`Original grades: ${array}`)
    console.log(`Grade number ${index + 1} is now: ${grade + 5}`)
    return grade + 5
})

Here we have to include the return statement because we have more than one line in the function!

Logging the original grades array only in the first iteration with that ifstatement, this will log:

Original grades: 72,75,90,91,92,92,93,94
Grade number 1 is now: 77
Grade number 2 is now: 95
Grade number 3 is now: 96
Grade number 4 is now: 97
Grade number 5 is now: 97
Grade number 6 is now: 98
Grade number 7 is now: 99

Summary

Remember that map() :

• returns the values into a new array

  • the length of the new array will always be equal to the original array

• does not modify the original array