JavaScript Array map() Method
The map() method in JavaScript creates a new array by applying a function to each element of the original array. It skips empty elements and does not alter the original array, making it ideal for transforming data.
One notable feature of the map() method is its handling of empty elements. It automatically skips executing the callback function for these elements, focusing solely on processing non-empty values. This behavior ensures efficient and streamlined processing, enhancing the overall performance of array transformations.
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.
Example: Here, we are using the map() method to create a new array containing the square roots of each number in the original array.
const numbers = [1, 4, 9, 16, 25];
const squareRoots = numbers.map(num => Math.sqrt(num));
console.log(squareRoots); // Output: [1, 2, 3, 4, 5]
Output
[ 1, 2, 3, 4, 5 ]
Example : This example uses the array map() method and returns the square of the array element.
// Input array
let arr = [2, 5, 6, 3, 8, 9];
// Using map to transform elements
let newArr = arr.map(function (val, index) {
return { key: index, value: val * val };
})
// Display output
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 }
]
Example: This example uses the array map() method to concatenate the character ‘A’ with every character of the name.
//Input string
let name = "Beginner";
// New array of character and names
// concatenated with 'A'
let newName = Array.prototype.map.call(name, function (item) {
return item + 'A';
})
// Display output
console.log(newName)
Output
[ 'GA', 'eA', 'eA', 'kA', 'sA' ]
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.
Example: Here, we are using parseint with map().
const strings = ['10', '20', '30'];
const integers = strings.map(str => parseInt(str));
console.log(integers); // Output: [10, 20, 30]
Output
[ 10, 20, 30 ]
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.