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 = array.map((num) => num * num);
console.log(squares); // [4, 25, 81]
According to MDN .Map() Syntax
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
callback
The function that produces an element of the new Array, taking three arguments:currentValue
The current element is being processed in the array.index
optional index of the current element being processed in the array.array
optional array wasmap
called upon.
thisArg
OptionalValue to use as whenthis
executing.callback
Table of Contents
ToggleExamples 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 = boys.map((girl) => 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 = numbers.map((num) => {
if(num % 2 != 0) {
return Math.sqrt(num)
}
return num;
})
console.log(oddSquareRoots);