JavaScript Tutorials

JavaScript Array map()
Syntax & Examples

Array.map() method

The map() method of the Array class in JavaScript returns a new array containing the results of invoking a provided function on every element in the calling array.

Syntax of Array.map()

There are 2 variations for the syntax of Array.map() method. They are:

1.
map(callbackFn)

Parameters

ParameterOptional/RequiredDescription
callbackFnrequiredA function to execute on each element in the array. It takes three arguments: element, index, and array.

This method returns a new array containing the results of invoking a function on every element in the calling array.

Returns value of type Array.

2.
map(callbackFn, thisArg)

Parameters

ParameterOptional/RequiredDescription
callbackFnrequiredA function to execute on each element in the array. It takes three arguments: element, index, and array.
thisArgoptionalA value to use as this when executing callbackFn.

This method returns a new array containing the results of invoking a function on every element in the calling array, using thisArg as the value of this inside callbackFn.

Returns value of type Array.


✐ Examples

1 Using map() method to double the values in an array

In JavaScript, we can use the map() method to create a new array with the values doubled.

For example,

  1. We define an array variable arr with elements [1, 2, 3, 4, 5].
  2. We define a callback function double that doubles the value of each element.
  3. We use the map() method with double to create a new array with doubled values.
  4. The result is stored in the variable doubledArr.
  5. We log doubledArr to the console using console.log() method to see the new array.

JavaScript Program

const arr = [1, 2, 3, 4, 5];
const double = element => element * 2;
const doubledArr = arr.map(double);
console.log(doubledArr);

Output

[2, 4, 6, 8, 10]

2 Using map() method to get the lengths of strings in an array

We can use the map() method to create a new array with the lengths of the strings in the original array.

For example,

  1. We define an array variable strArr with elements ['apple', 'banana', 'cherry'].
  2. We define a callback function getLength that returns the length of each string.
  3. We use the map() method with getLength to create a new array with the lengths of the strings.
  4. The result is stored in the variable lengths.
  5. We log lengths to the console using console.log() method to see the new array.

JavaScript Program

const strArr = ['apple', 'banana', 'cherry'];
const getLength = element => element.length;
const lengths = strArr.map(getLength);
console.log(lengths);

Output

[5, 6, 6]

3 Using map() method with a thisArg

We can use the map() method with a thisArg to create a new array using a specific context.

For example,

  1. We define an array variable arr with elements [1, 2, 3].
  2. We define an object context with a multiplier property set to 3.
  3. We define a callback function multiply that multiplies each element by the multiplier property of the context object.
  4. We use the map() method with multiply and context as thisArg to create a new array with multiplied values.
  5. The result is stored in the variable multipliedArr.
  6. We log multipliedArr to the console using console.log() method to see the new array.

JavaScript Program

const arr = [1, 2, 3];
const context = { multiplier: 3 };
function multiply(element) {
  return element * this.multiplier;
}
const multipliedArr = arr.map(multiply, context);
console.log(multipliedArr);

Output

[3, 6, 9]

Summary

In this JavaScript tutorial, we learned about map() method of Array: the syntax and few working examples with output and detailed explanation for each example.