Table of Contents

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.

The map method doesn't change the original array but returns a new array. It's a pure function (assuming the provided mapping function is pure), and it's an essential part of functional programming in JavaScript.

Example 1

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

Example 2

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 }
]

Example 3

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:

Example 4

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);