JavaScript Array map() Method method creates a new array with the results of a called function for every array element. This function calls the argument function once for each element of the given array in order.
Syntax:
// Arrow function
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })
// Callback function
map(callbackFn)
map(callbackFn, thisArg)
// Inline callback function
map(function (element) { /* … */ })
map(function (element, index) { /* … */ })
map(function (element, index, array) { /* … */ })
map(function (element, index, array) { /* … */ }, thisArg)
Parameters: This method accepts five parameters as mentioned above and described below:
- callback: This parameter holds the function to be called for each element of the array.
- element: The parameter holds the value of the elements being processed currently.
- index: This parameter is optional, it holds the index of the currentValue element in the array starting from 0.
- arr: This parameter is optional, it holds the complete array on which Array.every is called.
- thisArg: This parameter is optional, it holds the context to be passed as this is to be used while executing the callback function. If the context is passed, it will be used like this for each invocation of the callback function, otherwise undefined is used as default.
Return value: This method returns a new array created by using the values modified by the arg_function using the value from the original array. This function does not modify the original array on which this function is implemented.
Below is an example of the Array map() method.
Example 1:
JavaScript
// JavaScript to illustrate map() methodfunction func() { // Original array let arr = [14, 10, 11, 00]; // new mapped array let new_arr = arr.map(Math.sqrt); console.log(new_arr);}func(); |
Output:
3.7416573867739413,3.1622776601683795, 3.3166247903554,0
Example 2: In this example, the method map() produces an array containing numbers obtained by dividing the numbers in the original array by 2.
JavaScript
// JavaScript to illustrate map() methodfunction func() { // Original array let arr = [2, 56, 78, 34, 65]; // new mapped array let new_arr = arr.map(function (num) { return num / 2; }); console.log("New array using normal function :- ", new_arr); // using arrow function // Map always return new Array do not make changes in previous one let newArr2 = arr.map(num => num * 2); console.log("New array using arrow function :- ", newArr2);}func(); |
Output:
New array using normal function :- [ 1, 28, 39, 17, 32.5 ] New array using arrow function :- [ 4, 112, 156, 68, 130 ]
Example 3: In this example, the method map() produces an array containing square roots of the numbers in the original array.
JavaScript
// JavaScript to illustrate map() methodfunction func() { // Original array let arr = [10, 64, 121, 23]; // new mapped array let new_arr = arr.map(Math.sqrt); console.log(new_arr);}func(); |
Output:
[3.1622776601683795, 8, 11, 4.795831523312719]
We have a complete list of Javascript Array methods, to check those please go through this Javascript Array Complete reference article.
Supported Browsers: The browsers supported by the JavaScript Array map() method are listed below:
- Google Chrome 1 and above
- Microsoft Edge 12 and above
- Mozilla Firefox 1.5 and above
- Safari 3 and above
- Opera 9.5 and above
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.
