JavaScript Array map() Method

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); // Output: [1, 2, 3, 4, 5]

Output

[ 1, 2, 3, 4, 5 ]

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

// 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 }
]

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

//Input string
let name = "Geeks";

// 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' ]

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); // Output: [10, 20, 30]

Output

[ 10, 20, 30 ]

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.