JavaScript Array map() method is used to create a new array by calling a function on every element of the array. This method is mainly used for transforming data in an array, such as performing calculations on array elements or extracting specific properties from an array of objects.
It does not modify the original array.
Syntax
array.map(function(currentValue, index, arr), thisValue)
Parameters
function(required): It is a function that is called on every element of the array.
currentValue(required): The current element being processed in the array.
index(optional): It is the current element’s index.
arr(optional): The array object to the current element belongs.
thisValue(optional): It is used to set the value of this inside the callback function.
Return value
Returns a new array with each element resulting from the callback function.
Visual Representation
Example 1: How to Use Array map() method
let numbers = [5, 10, 15, 20, 25];
let square = numbers.map(item => item * item);
console.log(square);
Output
[ 25, 100, 225, 400, 625 ]
Example 2: Using an array of objects
let gtu = [
{enrollnumber: 18, name: 'Ankit'},
{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);
Output
[ { '18': 'Ankit' }, { '21': 'Krunal' }, { '22': 'Rushikesh' } ]
In this example, we have transformed the original array of gtu objects into a new array mappedArrayObj. Each object in the output array has a dynamic key (enrollnumber) that corresponds to a student’s name.
Example 3: Accessing an index of an array
let numbers = [5, 10, 15, 20, 25];
numbers.map((item, i) => console.log(i));
Now, you can access all the indexes of the current item being iterated.
Output
0
1
2
3
4
We can define the function separately, pass the value to that function, and get the result.
let numbers = [5, 10, 15, 20, 25];
let square = (x) => {
return x*x;
}
let newArray = numbers.map((item, i) => square(item));
console.log(newArray);
Output
[ 25, 100, 225, 400, 625 ]
Example 4: Using non-array objects
const arrayLike = {
length: 3,
0: 5,
1: 10,
2: 15,
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
Output
[ 25, 100, 225 ]
Example 5: Using sparse arrays
let sparseArray = [5,10,,20,,];
let newArray = sparseArray.map(x => x * 2);
console.log(newArray);
Output
[ 10, 20, <1 empty item>, 40, <1 empty item> ]
In the above example, the missing elements (or “holes”) in the sparse array are skipped when using the method, and the resulting array retains the same sparsity structure.
Example 6: Mapped array contains undefined
let originalArray = [5, 10, 15, 20, 25];
let newArray = originalArray.map(element => {
if (element > 12) {
return element;
}
});
console.log(newArray);
Output
[ undefined, undefined, 15, 20, 25 ]
Browser Compatibility
- Google Chrome 1 and above
- Edge 12 and above
- Firefox 1.5 and above
- Opera 9.5 and above
- Safari 3 and above
Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.