Table of contents

JavaScript Array map() Method

The JavaScript Array map() method creates a new array by calling a provided callback function on every element in the original array. The map() method does not modify the original array and returns a new array where each element is the result of the callback function.

For example, array.map(callback) is useful when you need to transform every element of an array based on a specific logic or condition.

Syntax

The syntax for the Array.map() method is:

plaintext
array.map(callback(element, index, array), thisArg)

Parameters

The Array.map() method accepts two parameters:

  • callback (Required): A function that is called on each element of the array. It takes the following arguments:
    • element: The current element being processed.
    • index (Optional): The index of the current element.
    • array (Optional): The array being traversed.
  • thisArg (Optional): Value to use as this when executing the callback function. If not provided, undefined is used.

Return Value

A new array with the result of calling the provided function on every element in the original array.

Examples of JavaScript Array.map() Method

Example 1: Doubling Numbers in an Array

You can use the map() method to create a new array where each number is doubled.

javascript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // Output: [2, 4, 6, 8, 10]

Explanation: The map() method creates a new array where each element in the numbers array is multiplied by 2.

Example 2: Mapping Objects in an Array

You can use map() to transform objects in an array by modifying their properties.

javascript
const users = [
 { name: 'Alice', age: 25 },
 { name: 'Bob', age: 30 }
];
const userNames = users.map(user => user.name);
console.log(userNames);  // Output: ['Alice', 'Bob']

Explanation: The map() method creates a new array containing only the name properties of the users objects.

Example 3: Using Index in map()

The map() method also provides access to the index of each element.

javascript
const numbers = [10, 20, 30];
const indexedNumbers = numbers.map((num, index) => `${index}: ${num}`);
console.log(indexedNumbers);  // Output: ['0: 10', '1: 20', '2: 30']

Explanation: The map() method uses the index of each element to create a new array that includes both the index and the number.

Example 4: Using map() with thisArg

You can pass a thisArg value to be used as this inside the callback function.

javascript
const multiplier = {
 factor: 10
};
const numbers = [1, 2, 3];
const scaled = numbers.map(function(num) {
 return num * this.factor;
}, multiplier);
console.log(scaled);  // Output: [10, 20, 30]

Explanation: The map() method uses the multiplier object as the this context to scale each number by the factor of 10.

Example 5: Mapping Strings to Uppercase

You can use the map() method to transform each string in an array to uppercase.

javascript
const fruits = ['apple', 'banana', 'mango'];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits);  // Output: ['APPLE', 'BANANA', 'MANGO']

Explanation: The map() method creates a new array with each fruit’s name transformed to uppercase.

Example 6: Mapping an Empty Array

When map() is called on an empty array, it returns an empty array.

javascript
const emptyArray = [];
const mapped = emptyArray.map(item => item * 2);
console.log(mapped);  // Output: []

Explanation: Since there are no elements in the emptyArray, the map() method returns an empty array.

JavaScript

Related Articles