JavaScript Map

In this article, I am going to explain the built-in JavaScript method: Array.map() and then look at a few examples of how to use it.

Introduction

As stated earlier, Map() is a built-in JavaScript method that creates a new array with modified elements, i.e. it allows you to iterate over an array and modify each element using a callback function, then return an array of these modified elements.

Syntax

arr.map(function(currentElement, index, array))

• arr is the array we are looping through

• function is the function to execute for each element of the array

• currentElement is the value of the current element being processed in the array

• index is the index of the current element being processed

• array is the array we are looping through

Note:

• Map() creates a new array by calling a function for each element of the array

• Map() only calls a function once for each element.

• Map() does not execute the function for empty elements

• Map() does not modify the original array

Examples:

Example 1: Loop through an array of numbers

const numbers = [25, 36, 49, 64] // our array

// loop through the array
let squareRootNums = numbers.map((num) => {
    return Math. sqrt(num)
})

console.log(squareRootNums) // [5, 6, 7, 8]

Example 2: Loop through an array of objects

const students = [
    {name: 'Pat', grade: 'A'},
    {name: 'Enid', grade: 'B'},
    {name: 'Kelvin', grade: 'C'},
    {name: 'Mercy', grade: 'A'},
]

let newArray = students.map((student) => {
    return `${student.name} : ${student.grade}`
})

console.log(newArray) // ['Pat : A', 'Enid : B', 'Kelvin : C', 'Mercy : A']

That's all for this article. Thank you for reading :).

References

MDN Web Docs