Skip to main content

Javascript series - Understanding array Map and Reduce

· 3 min read
Niko
Niko
Software Engineer @ Naver

JavaScript provides a number of built-in array methods that can be used to manipulate arrays in a variety of ways. Two of the most powerful and commonly used methods are map and reduce. In this section, we will explore what these methods do, and how to use them to perform complex operations on arrays of data in JavaScript.

tip

Map and Reduce: Understanding and Implementing These Powerful Array Methods in JavaScript

Array map method​

The map method is used to create a new array that is the result of applying a given function to each element of the original array. The basic syntax for using the map method is as follows:

let newArray = oldArray.map(function (element, index, array) {
  // Function to apply to each element
});

Example of using the map method to square each element of an array:

let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(function (x) {
  return x * x;
});
console.log(squares); // [1, 4, 9, 16, 25]

Array reduce method​

The reduce method is used to reduce an array to a single value by applying a given function to each element of the array, and accumulating the result. The basic syntax for using the reduce method is as follows:

let result = array.reduce(function (accumulator, element, index, array) {
  // Function to apply to each element
}, initialValue);

Example of using the reduce method to sum the elements of an array:

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function (a, b) {
  return a + b;
}, 0);
console.log(sum); // 15

It is worth noting that the reduce method can also be used to perform more complex operations on arrays, such as counting the occurrences of elements, grouping elements by a certain property, or flattening a nested array.

Summary​

In conclusion, map and reduce are two powerful array methods in JavaScript that enable developers to perform complex operations on arrays of data. By using these methods, developers can write more readable and performant code, and avoid having to write long and complex loops. It's always good to keep in mind that they are not the only method to do something and there are other alternatives. But the map and reduce method are great tools to have in your toolbox.

References​