map - Higher Order Function in JavaScript - in Depth

Topics covered:

1- Basic implementation with example

2- Parameters: element, index, array, this

3- when we shouldn't use map()

4- trick ;)

1- Basic implementation with example

In modern JavaScript, we have a very powerful method which is map.

Map method runs/loops on an array (not on object) and runs a function on each element of the array, the returned value of that function becomes the new element of the new array.

Confused? don't worry, I will cover every detail and make you comfortable with map function

let's get started.

const drugs = ["facebook", "whatsapp", "instagram"]

// map
const newDrugs = drugs.map(function(value){
    return "the " + value;
})

//console newDrugs
["the facebook", "the whatsapp", "the instagram"]

map has taken every element of the array drugs and ran function on it, returned value of the function (with "the ") has become the new value of the new array

Arrow function makes it a bit more clean

// map
const newDrugs = drugs.map(value => "the ")

2- Parameters: element, index, array, this

Element:

It is the each single element of array

const newDrugs = drugs.map(function(element){
    return "the " + element;
})

Index

It is the index of each single element of array

const newDrugs = drugs.map(function(element, index){
    console.log(index)  //console 0, 1, 2
    return "the " + element;
})

Array:

It is the initial array (drugs) which we are mapping

const newDrugs = drugs.map(function(element, index, array){
    console.log(index)  
    console.log(array)  //console every time ["facebook", "whatsapp", "instagram"]
    return "the " + element;
})

this:

We can set the value of our own 'this' inside map ;). Let me show you how.
Define the new object as below

const newDrugs = drugs.map(function(element){
    return "the " + element + " by " + this.ceo;
}, {
ceo: 'mark zuckerburg',
})

//console
["the facebook by  mark zuckerburg", "the whatsapp by  mark zuckerburg", "the instagram by  mark zuckerburg"]

3- when we shouldn't use map()

map() builds the new array and return it, when you don't want returned array, use forEach or for...of

4- trick

We can reformat the array of objects using map

const ourArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}]
let reformattedArray = ourArray.map(x => {
   let newObj = {}
   newObj[x.key] = x.value
   return newObj
})

// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}],