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}],
Top comments (1)
thank you