How to use javascript map function

In this article you will learn about one of javascript array method the map() function with the help of example

Sometimes you may need to apply some procedure to its elements of an array so that you get a new array with modified elements. Instead of manually iterating over the array using a loop, you can simply use the built-in Array.map() method to iterate over an array and modify its elements using a callback function. The callback function will then be executed on each of the array's elements and return a new array.

Imagine you have an array of number and you want to get the square of each number and store it inside a new array one way you can achieve it is using for loop

Example Using For Loop

let numbers = [2, 4, 6, 8, 10]

function square(number) {
  return number * number
}
let newArray = []

for (let i = 0; i < numbers.length; i++) {
  newArray.push(square(numbers[i]))
}
console.log(newArray) // Output: [ 4, 16, 36, 64, 100 ]

Example Using Map()

let numbers = [2, 4, 6, 8, 10]

function square(number) {
  return number * number
}

let square_numbers = numbers.map(square)
console.log(square_numbers) // Output: [ 4, 16, 36, 64, 100 ]

You can also simplify the above example using arrow function

let numbers = [2, 4, 6, 8, 10]
let square_numbers = numbers.map((number) => number * number)
console.log(square_numbers) // Output: [ 4, 16, 36, 64, 100 ]

As you can see from the above example the Array.map() method is much simpler than the traditional for loop. The Array.map() method is commonly used to apply some changes to the elements for the array

map() Syntax

The syntax of the Array.map() method is

arr.map(function (element, index, array) {}, this)

map() Parameters

The map() method takes in:

1. callback - The function called for every array element. Its return value is added as a single element in the new array. The call back function called with three arguments
   • Element The current element being processed in the array.
   • Index The index of the current element being processed in the array.
   • Array The original array.
2. thisArg (optional) - Value to use as this when executing callback. By default, it is undefined.

You can also test arguments of the callback using console.log() if you're interested:

let arr = [1, 2, 3, 4]
arr.map(function (element, index, array) {
  console.log(element)
  console.log(index)
  console.log(array)
  console.log(this)
  return element
}, 80)

map() Return Value

Returns a new array with elements as the return values from the callback function for each element.

Example 1: Array.map() using custom function

const numbers = [9, 16, 36, 64, 144]

let newNumbers = numbers.map(Math.sqrt)
// [ 3, 4, 6, 8, 12 ]
console.log(newNumbers)

Example 2: Array.map() for array of objects

let users = [
  { firstName: 'John', lastName: 'Smith' },
  { firstName: 'Bob', lastName: 'Jacob' },
  { firstName: 'Alex', lastName: 'Tim' },
]

let fullnames = users.map(function (element) {
  return `${element.firstName} ${element.lastName}`
})

console.log(userFullnames) // ["John Smith", "Bob Jacob", "Alex Tim"]

For further insights into the map() function, check out the official documentation on MDN (Mozilla Developer Network).