.map(fn)

The map(fn) method in JavaScript is used to create a new array populated with the results of calling a provided function on every element in the calling array. It does not mutate the original array.

Syntax

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

• array: The array on which the map() method is called.
• callback: A function that is called for every element of the array. It takes up to three arguments:
  • currentValue: The current element being processed in the array.
  • index (optional): The index of the current element being processed in the array.
  • array (optional): The array map() was called upon.
• thisArg (optional): Value to use as this when executing callback.

Description

The map() method calls the provided callback function once for each element in an array, in order, and constructs a new array from the results. The callback function is not called for missing elements of the array, i.e., it doesn’t process holes in sparse arrays.

Examples

Basic Example

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

In this example, map() creates a new array with each element being the double of the corresponding element in the original array.

Example with Index and Array Parameters

let numbers = [1, 2, 3];
let detailed = numbers.map((num, index, array) => ({
  number: num,
  index: index,
  originalArray: array
}));
console.log(detailed);
// [
//   { number: 1, index: 0, originalArray: [1, 2, 3] },
//   { number: 2, index: 1, originalArray: [1, 2, 3] },
//   { number: 3, index: 2, originalArray: [1, 2, 3] }
// ]

In this example, map() creates a new array of objects containing the value, index, and the original array.

Using thisArg

let numbers = [1, 2, 3];
let multiplier = {
  factor: 10
};

let multiplied = numbers.map(function(num) {
  return num * this.factor;
}, multiplier);

console.log(multiplied); // [10, 20, 30]

In this example, the thisArg parameter is used to set this in the callback function to the multiplier object.

Mapping to Objects

let names = ["Alice", "Bob", "Charlie"];
let nameLengths = names.map(name => ({ name: name, length: name.length }));
console.log(nameLengths);
// [
//   { name: "Alice", length: 5 },
//   { name: "Bob", length: 3 },
//   { name: "Charlie", length: 7 }
// ]

This example creates a new array of objects where each object contains the name and its length.

Quirks and Considerations

1. Non-Mutative: The map() method does not modify the original array; instead, it creates a new array with the results.
   
2. Sparse Arrays: The map() method does not call the callback function for empty slots in sparse arrays.
   
3. Return Value: Always returns a new array with the results of calling the callback function on every element.
   
4. Usage with Other Methods: Often used with other array methods like filter(), reduce(), etc., to create complex transformations.
   
5. Shallow Copy: The new array returned by map() is a shallow copy of the original array. Nested arrays or objects in the array will not be deeply copied.

Example: Combining map() and filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenDoubled = numbers.filter(num => num % 2 === 0).map(num => num * 2);
console.log(evenDoubled); // [4, 8, 12]

In this example, filter() first creates a new array of even numbers, and map() then creates a new array of these numbers doubled.