Map & Reduce Array Elements in JavaScript

In JavaScript, arrays come with a few built-in methods for transforming their elements.

Transform array elements

To transform the elements of an array and replace their current value with a new one, you can use the map() method of the array instance:

array.map((element, index) => {
  return value;
});

Where:

• element is the current element.
• index is the index of the current element in the array.
• value is the new value of the current element.

This method loops on each element of the array and replaces the value of the current element with the one returned by the callback function.

Note: If the callback function doesn't return a value, the value of the current element will be automatically replaced with undefined.

Example

Let's consider this script, that selectively adds a new property to the objects of an array:

let products = [
  {
    name: 'Yogurt',
    price: 3.45,
    expiresInDays: 3,
  },
  {
    name: 'Mushrooms',
    price: 2.55,
    expiresInDays: 4
  },
  {
    name: 'Ground beef',
    price: 9.90,
    expiresInDays: 1
  }
];

products = products.map(product => {
  if (product.expiresInDays <= 3) {
    let newPrice = product.price - (product.price * 0.3);

    product.discountedPrice = parseFloat(newPrice.toFixed(2));
  }
  return product;
});

console.log(products);

When executed, it will use the map() method of the products array to add a new property named discountedPrice containing the value of the price property minus 30%, if the expiresInDays property is inferior or equal to 3 days to each element.

Which will produce this output:

[
  {
    name: 'Yogurt',
    price: 3.45,
    expiresInDays: 3,
    discountedPrice: 2.42
  },
  {
    name: 'Mushrooms',
    price: 2.55,
    expiresInDays: 4
  },
  {
    name: 'Ground beef',
    price: 9.9,
    expiresInDays: 1,
    discountedPrice: 6.93
  }
]

Accumulate array elements

To accumulate (or aggregate) the elements of an array into a single value, you can use the reduce() method of the array instance:

array.reduce((accumulator, element, index?) => {
  return value;
}, initialValue);

Where:

• accumulator is the value that will be returned by the .reduce() method.
• element is the current element.
• index (optional) is the index of the current element in the array.
• value is the value of the accumulator variable updated at the next iteration.
• initialValue is the initial value of the accumulator variable on the first iteration.

This method loops on each element of the array and replaces the current value of the accumulator variable with the one returned by the callback function.

Example

Let's consider this script, that calculates the total amount of a shopping cart:

const cart = [
  {
    description: 'Wireless Keyboard',
    quantity: 3,
    unitPrice: 89
  },
  {
    description: 'Screen 24"',
    quantity: 2,
    unitPrice: 599
  },
  {
    description: 'Wireless Mouse',
    quantity: 3,
    unitPrice: 52.50
  }
];

const total = cart.reduce((sum, product) => {
  sum += product.quantity * product.unitPrice;
  return sum;
}, 0);

console.log(total);

When executed, it will use the reduce() method of the cart array to update the value of the sum accumulator variable (initialized with 0) with the product of the quantity and unitPrice properties of the current element.

Which will produce this output:

1622.5