Normally to perform any operation on array elements we use for
loop and store the element in another array, but now we can do any operation on array elements just by using map() method provided by javascript.
General syntax of map() method is,
array.map( function( element ){ /* callback function logic */ } );
Usage example,
// Increment each element by 2
const array=[ 3, 5, 7, 1 ];
const result = array.map( num => num+2 );
console.log(result);
Now let's see how it works, here in this example instead of name of callback function arrow function defined there itself, when map() method applied on any array, map
runs callback function on each and every element of the array and does operation on that element and finally returns the array with modified elements.
Now let's see some other forms of map
method, like what are the other argument it takes, how many arguments does callback function can take and all.
this
argument in map method.
As we saw in filter
method, map
method also accepts thisArgument
, again as we saw in filter
method it is optional parameter if it is not defined then it takes undefined
as default value but callback function is the mandatory argument to be passed. let's see how we can use it in map
method,
syntax:
array.map( function( element ){ /* callback function logic */}, thisArgument)
Example,
const marks = [ 56, 72, 35, 80 ];
const grace = 15;
function addGrace( mark ) {
return mark + this;
}
const result = marks.map(addGrace, grace);
console.log(result) // output: [ 71, 87, 50, 95 ]
here in this example grace
value passed as thisArgument
and we access the value using this
in the callback function.
Parameters for callback function
As we saw in filter
method map
also expects 3 values as parameter, element, index and array. In these parameters index and array are optional parameters.
syntax for this looks like,
array.map( function( element, index, array ){ /* callback function logic */ }, this Argument )
- element: current element of the array which is going to be processed.
- index: index of the current element of the array which is going to be processed.
- array: array on which the
map
method is operating.
When to use map()?
- If result array is going to be used in the future then use
map
else don't usemap
. - If the callback function not returning any value then don't use
map
.
map v/s forEach
map
returns new array of processed elements butforEach
throws return value and returnsundefined
.- To alter the elements by applying function use
map
, Since this doesn't modify the original array and returns new array. On the other hand to loop through all elements and don't need returned value then useforEach
.
Polyfill for map()
At first let's see basic version polyfill for map
without context
argument.
Array.prototype.myMap = function (callback) {
let result = []
for (let i = 0; i < this.length; i++) {
result.push(callback(this[i], i, this))
}
return result;
}
Polyfill for map
with context
as one of the argument
Array.prototype.myMap = function (callback, context) {
let result = []
for (let i = 0; i < this.length; i++) {
result.push(callback.call(context, this[i], i, this))
}
return result;
}
This is about map
method of javascript.
Thank you for reading...