The "map()" method in javascript. How it works?

The javascript map method!

map() is an array method in JavaScript that allows you to transform each element in an array and create a new array with the results. It does not mutate (change) the original array—it returns a new array instead.

This is the sintax:

array.map(callback(currentValue[, index[, array]])[, thisArg])

It receives a callback parameter plus a optional one.

The callback function gets called once for each element in the array, in order. It takes three arguments:

currentValue: The current element being processed.

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

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

The optional paramenter:

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

🧠 Keep in mind:

It does not modify the original array.

It returns a new array of the same length.

You must return something in the callback, or the resulting array will be filled with undefined.

Sparse arrays (arrays with missing items) are handled as if the missing items don’t exist.

Example:

const numbers = [1, 2, 3, 4, 5];

// Multiply each number by 2

const doubled = numbers.map(function(number) {

  return number * 2;

});

console.log(doubled);  // [2, 4, 6, 8, 10]

map() goes through each item, applies the function, and builds a new array.

It also works with arrow functions:

const numbers = [1, 2, 3];
const squared = numbers.map(num => num * num);
console.log(squared);  // [1, 4, 9]

Using Index and Array Parameters.

You can access both the index and the original array in the callback:

const numbers = [10, 20, 30];
const detailed = numbers.map((num, index, arr) => {
  return Index ${index}: ${num} (Original Array: [${arr}]);
});
console.log(detailed);
/*
[
  "Index 0: 10 (Original Array: [10,20,30])",
  "Index 1: 20 (Original Array: [10,20,30])",
  "Index 2: 30 (Original Array: [10,20,30])"
]
*/

Real-World Examples:

Transforming an Array of Objects

You often use map() to reshape data.

const users = [
  { id: 1, name: 'Alice', age: 28 },
  { id: 2, name: 'Bob', age: 34 },
  { id: 3, name: 'Charlie', age: 25 }
];
const names = users.map(user => user.name);
console.log(names);  // ["Alice", "Bob", "Charlie"]

To Add/Modify Object Properties:

const usersWithStatus = users.map(user => {
  return {
    ...user,          // spread operator to copy existing properties
    isActive: true    // add a new property
  };
});
console.log(usersWithStatus);
/*
[
  { id: 1, name: 'Alice', age: 28, isActive: true },
  { id: 2, name: 'Bob', age: 34, isActive: true },
  { id: 3, name: 'Charlie', age: 25, isActive: true }
]
*/

Mapping Sparse Arrays:

const sparseArray = [1, , 3];  // the second item is missing
const mapped = sparseArray.map(num => num * 2);
console.log(mapped);    // [2, , 6]
console.log(mapped.length); // 3

Using thisArg:

const multiplier = {
  factor: 3
};
const numbers = [1, 2, 3];
const tripled = numbers.map(function(num) {
  return num * this.factor;
}, multiplier);
console.log(tripled);  // [3, 6, 9]

Without the second argument (thisArg), this.factor would be undefined.

Chaining map() with filter()

const numbers = [1, 2, 3, 4, 5, 6];
const evenSquares = numbers
  .filter(num => num % 2 === 0)    // keep even numbers
  .map(num => num * num);          // square them
console.log(evenSquares);  // [4, 16, 36]