The function map() in Javascript ES6

This useful array method creates a new array with the results of calling a provided function on every element in the calling array.

Photo by Paweł Czerwiński on Unsplash

Let talk about we have an array of objects with coordinates x, y and name.

let coordinates = [
  {  
    'name' : 'coordinate_1',
    'x' : 12,
    'y' : 123
  },
  {
    'name' : 'coordinate_2',
    'x' : 134,
    'y' : 52
  },
  {
    'name' : 'coordinate_3',
    'x' : 34,
    'y' : 52
  }
];

Now let´s create a new array from the coordinates with the name of the coordinates for example.

let coordinate_names = [];
   for (let i = 0; i < coordinates.length; i++) {
        coordinate_names.push(coordinates[i].name);
   }
console.log(coordinate_names);

Now its time to introduce,

Array.prototype.map(callback, thisValue);

This function have three arguments for the callback (currentValue, index, array)

currentValue -> required, the current element being processed in the array.
index -> Optional, the index of the current element being processed in the array.
array -> Optional, the array map was called upon.

And thisValue is to use as this when executing callback.

Let´s write the function which creates a new array of coordinates with the Array.prototype.map() function:

let coordinate_names = coordinates.map(coordinate => {
    return coordinate.name;
});
console.log(coordinate_names);

Benefits of using array.prototype.map():

1. Since you operate with the element of the array, you don´t have to define any index.
2. You don’t have to create a new array and push elements into it.
3. Don't have to create any loop.
4. Remember always return, otherwise you will get an array of undefined.
5. Map return a finished array you feel free to assigned to a new variable.

What about the other arguments?

Index → will be print the index of the array, like i in our loop example.

let coordinate_names = coordinates.map((coordinate,index) => {
    return coordinate.name + index;
});
console.log(coordinate_names); 
// [ 'coordinate_10', 'coordinate_21', 'coordinate_32' ]

Array → will be print the array of the current element belongs to, in this particular case 3 times.

let coordinate_names = coordinates.map((coordinate,index,array) => {
    return array;
});
console.log(coordinate_names); 
[[
  { name: 'coordinate_1', x: 12, y: 123 },
  { name: 'coordinate_2', x: 134, y: 52 }, 
  { name: 'coordinate_3', x: 34, y: 52 }
 ], 
 [
  { name: 'coordinate_1', x: 12, y: 123 }, 
  { name: 'coordinate_2', x: 134, y: 52 },
  { name: 'coordinate_3', x: 34, y: 52 }
 ],
 [
  { name: 'coordinate_1', x: 12, y: 123 },
  { name: 'coordinate_2', x: 134, y: 52 },
  { name: 'coordinate_3', x: 34, y: 52 }
]]

thisValue -> Does nothing when using an arrow function its because, arrow functions cannot be bound. A this value is a special object which is related with the execution context of the function. For example.

var myObject = { name: 'myObject' };

[1,2].map(function(item) { 
  console.log(item); // 1, 2
  console.log(this === myObject); // true
}, myObject)

I often share more code tips on my Instagram you can say hello to me on my Twitter or see how i code in my Github.

Thank you very much and keep coding!!!

Yoel