JavaScript map() Method

Introduction

It allows developers to create a new array by transforming or modifying each element of an existing array. It’s particularly useful when you need to transform or process each element and return a new array with the results, leaving the original array unchanged.

What is JavaScript map() Method?

The map method in JavaScript is an array method used to create a new array by applying a provided function to each element in the original array.

Syntax of map()

const newArray = array.map(function(element, index, array) {
  // Return transformed element here
}, thisArg);

element: The current element being processed in the array.

index (optional): The index of the current element being processed.

array (optional): The array map was called upon.

thisArg (optional): A value to use as this when executing the callback function.

Basic Examples of map()

You will see many examples.

Example 1: Multiply Numbers

let numbers = [1,2,3];

let result =numbers.map(num => num*2); 

console.log(result);

Output:

Example 2: Add Numbers in each Mark

let marks = [50,60,70];

let updated = marks.map(mark => mark+5);

console.log(updated);

Output:

Example 3: Square Numbers

let nums = [2,3,4];

let result =nums.map(num =>num*num);

console.log(result);

Output:

map() with Objects

Example:

let users = [

{name:"John"},

{name:"Aman"},

{name:"Rahul"}

];

let names = users.map(user =>user.name);

console.log(names);

Output:

map() with Arrow Functions

Example:

let nums = [1,2,3];

let result = nums.map(num=>num+1);

console.log(result);

Output:

Characteristics of a map

1. Returns a New Array: The map method returns a new array containing the results of applying the provided function to each element of the original array.

2. Original Array Unchanged: The original array remains unchanged after the map operation.

3. Transforms Each Element: The function provided to map transforms each element in the array, and the result of this transformation is stored in the new array.

4. Iterates Over Every Element: The function passed to map is called for every element in the array, even if the element is undefined, null, or an empty slot.

5. Chaining: Since map returns a new array, you can chain other array methods like filter, reduce, etc., on the result.

Real-Life Example

You will see some real-life examples.

Real-Life Example 1: E-commerce Product Price Update

In this example, you will see a discount applied to each product’s price.

let prices = [100,200,300];
//Discount:
let discount = prices.map(price => price - 20);

console.log(discount);

Output:

Real-Life Example 2: Username Formatting

let users = ["john","tom"];

let result = users.map(user=>user.toUpperCase());

console.log(result);

Output:

Difference Between map() and forEach()

Many beginners confuse them.

let nums = [1, 2];

let result = nums.map(
    num => num * 2
);

nums.forEach(
    num => console.log(num)
);

Difference Between map() and filter()

[1, 2, 3]
.map(
    x => x * 2
)

[1, 2, 3]
.filter(
    x => x > 1
)

Common Mistakes in map()

Mistake 1: Forgetting Return Statement

Wrong:

let nums = [1,2];
let results = nums.map(num => {num*2});
console.log(results);

Output:

Correct:

let nums = [1,2];
let results = nums.map(num => {return num*2});
console.log(results);

Output:

Mistake 2: Using map() Without Saving Result

wrong:

let nums = [1,2];
nums.map(num => {return num*2});

You will not get output.

Correct:

let nums = [1,2];
let results = nums.map(num => {return num*2});
console.log(results);

Output:

map method – Interview Questions

map method – Objective Questions (MCQs)

Conclusion

The JavaScript map() method is a powerful array method used to transform data and create new arrays efficiently. It improves code readability and is widely used in modern JavaScript development, APIs, and frameworks like React.

Unlike loops, map() provides a cleaner and more functional approach to processing arrays.