Blog Post
JavaScript Array Map() Method

What the JavaScript array map method is? what it can do? or when it should be used?

According to MDN 

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

A classic example is if we want an array of all elements in a given array multiplied by its square, we could do this using a for-loop as seen in the example below :

const array = [2, 5, 9];
let squares = [];
for (let i = 0; i < array.length; i++) {
  squares.push(array[i] * array[i]));
console.log(squares); // [4, 25, 81]

What does the above code do? It loops through an array, finds the square of each element in the array and pushes it to the new array as defined.
Now, Here MAP() comes into the role

const array = [2, 5, 9];
let squares = => num * num);

console.log(squares); // [4, 25, 81]

According to MDN .Map() Syntax

var new_array = callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])

callbackThe function that produces an element of the new Array, taking three arguments:currentValueThe current element being processed in the array.indexOptionalThe index of the current element being processed in the array.arrayOptionalThe array wasmap called upon.

thisArgOptionalValue to use as whenthis executing.callback

Examples of the Map Method

Example 1: Extracting values from an array of objects

 const boys = [
       {name: 'Sarah', age: 19},
       {name: 'Laura', age: 10},
       {name: 'Jessy', age: 29},
       {name: 'Amy', age: 23}];

    let boysAges = => girl.age);

    console.log(boysAges);  //[19, 10, 29, 23]
Example 2: Apply the Callback on only certain elements

const numbers = [4, 9, 36, 49];

let oddSquareRoots = => {
  if(num % 2 != 0) {
    return Math.sqrt(num)     
   return num;


Tags In
February 15, 2019

Leave an reply

Your email address will not be published. Required fields are marked *