Today's lesson is about the map function.

What is Map ?

The map function is a functional-inspired function that applies a given function to every element of an Array.

How do you use it ?

const array = [10, 11, 12, 13, 14];
const fn = element => element * 2;

const resultArray = array.map(element => fn(element))

You first need an array, then a callback. You chain the map call on your array and pass the callback as the first argument of the function.

Signature

The map function can take up to two parameters.

callback

The callback is a function that will be call on every element of the array. It can take up to 3 parameters.

element

This is the current element from the array. In our example, it will consecutively take the value 10, then 11, then 12 and so on until the end of the array.

index

The index correspond to the current index of the internal loop of the function. As for the element, it will consecutively take the value 0, then 1, then 2 and so on until the end of the array.

array

The third and last argument is a duplicate of the array the map function is applied to. In out example, array will equal [10, 11, 12, 13, 14] every loop.

this

You can bind a custom value for the this context of the callback.

// Our new this
const context = {
  x: 0,
  y: 1
}
const array = [10, 11, 12, 13, 14];

const fn = function (element) {
  console.log(this) // this = context
  return element * 2
};

//                                Here, we set this to our context
const resultArray = array.map(element => fn(element), context)

The output here will be replaced by the value of the context variable.

Please note that this feature will only work when using the function syntax of function (and not the ES6+ syntax using arrows).

Tips and tricks

• The function ensure that every call is executed in the same order of the array.
• The function always return a new array.
• If you don't need the resulting array, use the forEach function instead.
• Explicitly specify function arguments. Parameters can conflicts if the callback change its signature. [source]