JS Tutorials | array.map()

JavaScript Tutorial

Mapping Arrays

JavaScript's Array.Map() method can be tremendously useful, but also seems to be confusing for some people. I intend to demistify array mapping and showcase some use cases of the method with this code. The map method iterates through the array that calls it and can access each element of the array and the index of each element with the function it takes as an argument. Array.map() returns a new array of the same size as the original, but each element has been transformed according to the function you define in the argument.

Example 1 | Adding one to each

Take for example an array of 3 integers: [1,2,3]. We want to add 1 to each element of the array. We can use Array.map() to accomplish this. The function defined in the argument is called on each element of the array. The element at each index itself is referred to in this case by the variable "e". We can work with the element by referring to "e" in the function. The return value of the function is what the new array will contain at each index. In short, Array.map() loops through the whole array, performs the function on each element of the array, and returns a new array with the modifications defined by the function. Click on the card below to run the code.

var arr = [1, 2, 3];

alert(arr);
					   
arr = arr.map(function(e){
   return e + 1;						 
});

alert(arr);

Example 2 | Accessing the index

We can access the index of each element and use it in our transformation function. The first argument of the defined function is the element at each index, the second argument is the index itself. In this example we'll use "e" to define the element and "i" to define the index. The function will simply add the index to each element. Click on the card below to run the code.

var arr = [0, 0, 0];

alert(arr);
					   
arr = arr.map(function(e, i){
   return e + i;						 
});

alert(arr);

Example 3 | Storing as different array

The map method doesn't actually modify the original array. In the first two examples, the array was replaced by the new array because we set arr = arr.map(). We can store the output of the map method as a new array and preserve the orginal array. Click on the card below to run the code.

var arr = [0, 0, 0];

alert(arr);
					   
var arr2 = arr.map(function(e, i){
   return e + i;						 
});

alert(arr2);

alert(arr);

Example 4 | Adding properties to objects

Say we have an array of objects. We can add a property to each object with the map method. Click on the card below to run the code.

var arr = [{}, {}, {}];

alert(JSON.stringify(arr));
					   
arr = arr.map(function(e){
   e.newProperty = "hi";
   return e;						 
});

alert(JSON.stringify(arr));

I hope this helps! Let me know in the comments if you have any questions! Good luck!

JS Tutorial | Mapping Arrays