JavaScript Array map() Method

The JavaScript map() method is very important for working with arrays, allowing you to iterate over each element and apply a specified callback function. This method creates a new array by transforming each element based on the logic defined within the callback function. Crucially, the original array remains unchanged, maintaining its integrity throughout the process.

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]

[ 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. 

// 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)

[
  { 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:

• 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. 

//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)

[ '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().

const strings = ['10', '20', '30'];
const integers = strings.map(str => parseInt(str));

console.log(integers); // Output: [10, 20, 30]

[ 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.