Java Script Map Method

Map is a very common and useful method for creating a new array from an existing one by applying a function to every element.
Syntax:

const newArray = oldArray.map(function(currentValue, index, array) {
  // Return element for newArray
});

currentValue: The current value being processed.
index (Optional): The index of the current value being processed.
array (Optional): The original array.

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(number => number * number);
 
console.log(squares); // [1, 4, 9, 16, 25]

Transform an array of strings into an array of objects:

const strings = ['Apple', 'Banana', 'Cherry'];
 
const objects = strings.map((str, index) => {
  return { name: str, id: index };
});
 
console.log(objects);

We can also use an implicit return here:

const strings = ['Apple', 'Banana', 'Cherry'];
 
const objects = strings.map((str, index) => ({ name: str, id: index }));
 
console.log(objects);

Output:

[
  { name: 'Apple', id: 0 },
  { name: 'Banana', id: 1 },
  { name: 'Cherry', id: 2 }
]

Imagine we have a collection of products, and we want to apply a discount to the products in even-indexed positions (0, 2, 4, etc.), and we want to calculate the average price before applying the discount. We'll make use of the value, index, and array parameters to accomplish this:

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 300 },
  { name: 'Monitor', price: 200 },
  { name: 'Keyboard', price: 50 },
];
 
const averagePrice = products.reduce((sum, product) => sum + product.price, 0) / products.length;
 
const discountedProducts = products.map((product, index, array) => {
  if (index % 2 === 0 && array.length > 2) {
    return {
      name: product.name,
      price: product.price - averagePrice * 0.1, // 10% of average price discount
    };
  }
  return product;
});
 
console.log(discountedProducts);

Output is:

[
  { name: 'Laptop', price: 860 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 240 },
  { name: 'Monitor', price: 200 },
  { name: 'Keyboard', price: 50 }
]

Here, products at even indexes get a discount of 10% of the average price of all products. The array parameter is used to check that there are more than two products to ensure the average price calculation makes sense in context, and the index parameter is used to select the items to discount.

Here's how it works:

• The average price of the products is (1000 + 500 + 300 + 200 + 50) / 5 = 410.
• The 10% discount of the average price is 410 * 0.1 = 40.
• This discount is applied to every second product in the array (i.e., the products at index 0, 2, etc.), so the final prices of the 'Laptop' and 'Tablet' are reduced by 40, resulting in the above output.

Transform an array of objects into an array of strings:

const courses = [
    { name: 'JavaScript Fundamentals' },
    { name: 'Angular CLI Basics' },
    { name: 'JavaScript Fundamentals' },
    { name: 'JavaScript Fundamentals' },
];
 
const coursesAsArray = courses.map(entry => entry.name);
console.table(coursesAsArray);