map() method of javascript

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 use map.
• If the callback function not returning any value then don't use map.

map v/s forEach

1. map returns new array of processed elements but forEach throws return value and returns undefined.
2. 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 use forEach.

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...