AppDividend
Latest Code Tutorials

Javascript Array Map Example | Array.prototype.map() Tutorial

0

Javascript Array Map Example | Array.prototype.map() Tutorial. The map() method creates the new array with the results of a provided function on every item in the calling array. The map() function calls the provided callback function once for each element in the array and in order and constructs the new array from the results. The Javascript array map() function is a pure function, and it does not modify the existing array instead it will return a new array.

If you want to learn more about the latest Javascript tutorials then check out this The Complete Javascript Course 2018.

Javascript Array Map Example

The map() method calls the provided function once for each element in an array, in order. The callback function is invoked with the following three arguments: the value of the element, the index of the element, and the Array object that is being traversed. The syntax is following.

array.map(function(currentValue, index, arr), thisValue)

The currentValue is a required parameter, and it is the current value of the element.

The index is an optional parameter, and it is the index of the current element.

The arr is an optional parameter which is the array object the current element belongs to.

 If existing elements of an array are changed based on the logic, then their value as passed to callback be the value at the time map visits them.

Let us take an example by creating a file called app.js. Add the following code.

let numbers = [1, 2, 3];
let squares = numbers.map(item => item * item);

console.log(squares);

So, in the above example, the numbers array will be traversed and perform the square operation to each item of an array and return a new array with those items filled with. So the new array will be the squared items of each element.

Javascript Array Map Example | Array.prototype.map() Tutorial

 

Using the map to reformat objects in an array

We can also use the map method to format the object in the given array like the following code.

// app.js

let gtu = [
    {enrollnumber: 18, name: 'Shree'}, 
    {enrollnumber: 21, name: 'Krunal'},
    {enrollnumber: 22, name: 'Rushikesh'}
];

let mappedArrayObj = gtu.map(obj => { 
   let newObj = {};
   newObj[obj.enrollnumber] = obj.name;
   return newObj;
});

console.log(mappedArrayObj);

So, in the above example, we have taken an array of objects. The object has two properties. So we have reformated the new object by creating the first object’s value as a key and second object’s value as a value.

So the result will be like this.

 

Javascript Array map() tutorial

Access index of an array in a map() method

We can access the index by passing the second argument to the callback function.

// app.js

let no = [1, 3, 4, 5];

no.map((item, i) => console.log(i));

Now, you can access all the index of the current item being iterated.

We can define the function separately and pass the value to that function and get the result.

// app.js

let no = [1, 3, 4, 5];

const square = (x) => {
    return x*x;
}

let newArray = no.map((item, i) => square(item));

console.log(newArray);

In the above example, we have defined the function separately and pass the current item to that function, and that function returns the square of that item.

Javascript Array map() method is a pure function, and if you have any experience in Redux, then it is familiar to you. It will always return a new array which is the principal of immutability.

If we need to transform the whole array into a new array, then map() is a beneficial method in Javascript.

Finally, Javascript Array Map Example | Array.prototype.map() Tutorial is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.