JavaScript Array map() Method
The map() method is an ES5 feature that creates a new array by applying a function to each element of the original array. It skips empty elements and does not modify the original array.
const a = [1, 2, 3, 4];
// Use map to create a new array with elements doubled
const b = a.map(x => x * 2);
console.log(b);
Output
[ 2, 4, 6, 8 ]
Syntax
arr.map((element, index, array) => { /* … */ })
Parameters
- element: It is a required parameter and holds the current element’s value.
- index: It is an optional parameter and it holds the index of the current element.
- arr: It is an optional parameter and it holds the array.
Return Value
It returns a new array and the arrays’ elements result from the callback function.
Example 1: Here, we are using the map() method to create a new array containing the square roots of each number in the original array.
const a = [1, 4, 9, 16, 25];
const sr = a.map(num => Math.sqrt(num));
console.log(sr);
Output
[ 1, 2, 3, 4, 5 ]
Example 2: This example uses the array map() method and returns the square of the array element.
let a = [2, 5, 6, 3, 8, 9];
// Using map to transform elements
let res = a.map(function (val, index) {
return { key: index, value: val * val };
})
console.log(res)
Output
[
{ key: 0, value: 4 },
{ key: 1, value: 25 },
{ key: 2, value: 36 },
{ key: 3, value: 9 },
{ key: 4, value: 64 },
{ key: 5, value: 81 }
]
Example 3: This example uses the array map() method to concatenate the character ‘A’ with every character of the name.
let s = "Geeks";
// New array of character and names
// concatenated with 'A'
let res = Array.prototype.map.call(s, function (item) {
return item + 'A';
})
console.log(res)
Output
[ 'GA', 'eA', 'eA', 'kA', 'sA' ]
Passing a method as parameter to map()
The parseInt() function converts strings to integers. When used with map(), it converts each element of an array of strings to integers. This explains that the map function can take another function as a callback function that has one parameter and another optional parameter.
Note: We are converting string to integer so that
Example: Here, we are using parseint() with map() function.
const a = ['10', '20', '30'];
const b = a.map(s => parseInt(s));
console.log(b);
Output
[ 10, 20, 30 ]
Recommended Links
- JavaScript Array Complete reference
- JavaScript Tutorial
- JavaScript Examples
- JavaScript Cheat Sheet-A Basic guide to JavaScript.
JavaScript Array map() method- FAQs
What is the JavaScript map() method and what is it used for?
The JavaScript map() method is used to create a new array by applying a specified function to each element of the original array. This method does not modify the original array and is particularly useful for transforming or processing data stored in arrays.
How does the map() method handle empty elements in an array?
The map() method skips empty array elements, only processing non-empty values, ensuring efficient transformations and maintaining data integrity.
What parameters does the map() method accept in its callback function?
The callback function used with the map() method accepts three parameters:
- element(required): The current element being processed in the array.
- index(optional): The index of the current element being processed.
- array(optional): The array map() was called upon.
Can map() be used with asynchronous functions in JavaScript?
While map() can call asynchronous functions, it does not handle promises correctly. For asynchronous transformations, use Promise.all() with map() or mapAsync() in frameworks that support it.
Can map() change the length of the array in JavaScript?
No, map() always returns a new array with the same length as the original array, since each element of the original array corresponds to an element in the new array.
