JavaScript Array map() Method
Last Updated :
27 Feb, 2024
JavaScript map()
method iterates over an array, applying a callback function to each element, and returns a new array with the results. The map() method
does not change the original array, and does not execute the function for empty elements.
JavaScript map() Method Syntax:
map((element, index, array) => { /* … */ })
Parameters:
- element: It is a required parameter and it holds the value of the current element.
- 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 elements of arrays are the result of the callback function.
JavaScript Array map() Method Example:
Here, we are using the map()
method to create a new array containing the square roots of each number in the original array.
Javascript
const numbers = [1, 4, 9, 16, 25];
const squareRoots = numbers.map(num => Math.sqrt(num));
console.log(squareRoots);
|
Explanation:
- The code uses the
map()
method to iterate over an array of numbers.
- For each number in the array, it applies an arrow function to calculate its square root.
- The
map()
method returns a new array containing the square roots.
- The resulting array of square roots is logged to the console.
JavaScript Array map() Method Example
This example uses the array map() method and returns the square of the array element.
Javascript
let arr = [2, 5, 6, 3, 8, 9];
let newArr = arr.map( function (val, index) {
return { key: index, value: val * val };
})
console.log(newArr)
|
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 }
]
Explanation:
Here,
- Input array
arr
contains numbers.
map()
iterates over each element, executing a callback function.
- Callback returns objects with index-value pairs representing squares of elements.
- New array
newArr
holds transformed elements.
- Result is logged, showing index-value pairs of squared elements.
JavaScript Array map() Method Example:
This example uses the array map() method to concatenate the character ‘A’ with every character of the name.
Javascript
let name = "Geeks" ;
let newName = Array.prototype.map.call(name, function (item) {
return item + 'A' ;
})
console.log(newName)
|
Output
[ 'GA', 'eA', 'eA', 'kA', 'sA' ]
Explanation:
Here,
- Input string
name
is “Geeks”.
map()
is invoked on name
string using Array.prototype.map.call()
.
- Callback appends ‘A’ to each character.
- Transformed elements stored in new array
newName
.
- Result logged, showing characters of original string concatenated with ‘A’.
Using a callback function with an argument
Using parseInt() with map() method. The parseInt()
function converts strings to integers. When used with map()
, it converts each element of an array of strings to integers.
JavaScript parseInt() with map() Example:
Here, we are using parseint with map().
Javascript
const strings = [ '10' , '20' , '30' ];
const integers = strings.map(str => parseInt(str));
console.log(integers);
|
Explanation:
The code uses map()
to iterate over an array of strings. For each string, parseInt()
converts it to an integer. The resulting integers are stored in a new array. Finally, the new array containing integers is logged to the console.
We have a complete list of Javascript Array methods, to check those please go through this Javascript Array Complete reference article.
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
Share your thoughts in the comments
Please Login to comment...