Javascript

Javascript Array Map with example

Javascript Array Map() Method

This article is all about what is Javascript Array Map and how to use Array.map() filter method properly. In the last article, we have talked about the Javascript Array.filter() method. We will try our best to make you understand What is Javascript Array Map method and how to use it.

What is the Javascript Array Map() Method?

The Array Map() method basically creates a new array with the results of calling a provided function on every element in the provided array. Array Map() method calls a given callback function once for each element in an array and constructs a new array from the results.

How do the Javascript Array Map Method works?

The callback function runs only for the indexes of the array which have some values or undefined. The callback function will not be run for the missing elements of the array.

It must also be noticed that the Array.map() method doesn’t change the value of the original array on which it is called on, rather it gives a new array using the callback function provided.

Syntax of the Javascript Array Map() Method

Here is the syntax of the Javascript Array Map method which is quite easy to use and understand.

var newArray = arr.map(function callback(currentValue, index, arr) {
    // Return element for newArray 
})

Current Value – It is a required parameter and it refers to the current value of the element.
Index – It is an optional parameter and it refers to the current index of the array.
Arr – It is also an optional parameter that refers to the array object the current element belongs to.

The range of elements processed by the map is set before the first invocation of callback. Elements that are added to the array after the call of the map, will not be visited by the map() method. If existing elements of the array are changed, their value as passed to callback will be the value at the time map visits them.

Examples of Javascript Map() Method

Anything can be understood by a good example, the same goes for the Javascript Map() Method. We have listed down some of the most common examples of Javascript Map() method to make you understand this concept even more.

Example 1 – Mapping an array of numbers to an array of square roots

You can easily map an array of numbers to an array of square roots using the Map() method. It is not difficult as it sounds, for reference you can check the code below.

var numbers = [1, 9, 16];
var roots = numbers.map(function(item) {
    return Math.sqrt(item)
});
// roots is now [1, 3, 4] 
// numbers is still [1, 9, 16] 

Example 2 – Using the map method to reformat objects in an array

In this example, we will learn to reformat objects in an array using the Array.Map() method. 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.

let oldArray = [{
    name: 'Keshav'
    value: 10
}, {
    name: 'Amit',
    value: 20
}, {
    name: 'Rahul',
    value: 30
}];
let newArray = oldArray.map(item => {
    let newObj = {};
    newObj[item.name] = item.value;
    return newObj;
});
console.log(newArray) 
// newArray is now [{Keshav: 10}, {Amit: 20}, {Rahul: 30}], 
// oldArray is still: 
// [{name: 'Keshav' value: 10}, {name: 'Amit', value: 20}, {name: 'Rahul', value: 30}] 

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 principle of immutability.

If we need to transform the whole array into a new array, then map() is a beneficial method in Javascript. However, If you’re not using the array it returns or you’re not returning a value from the callback in map method, there is no actual need to use the Map() method in both the condition.

So, this is all about Javascript Array.map() method. Thanks for reading!

Leave a Comment