DEV Community

Cover image for map - Higher Order Function in JavaScript - in Depth
umerjaved178
umerjaved178

Posted on

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"]

Enter fullscreen mode Exit fullscreen mode

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 ")
Enter fullscreen mode Exit fullscreen mode

2- Parameters: element, index, array, this

Element:

It is the each single element of array

const newDrugs = drugs.map(function(element){
    return "the " + element;
})
Enter fullscreen mode Exit fullscreen mode
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;
})
Enter fullscreen mode Exit fullscreen mode
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;
})
Enter fullscreen mode Exit fullscreen mode
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"]
Enter fullscreen mode Exit fullscreen mode

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}],
Enter fullscreen mode Exit fullscreen mode

End

any confusion regarding the above mentioned concepts?

Top comments (1)

Collapse
 
zeadhelal profile image
zead-helal

thank you