DEV Community

V Sai Harsha
V Sai Harsha

Posted on

Mastering ES6 - Map, Filter, and Reduce

Introduction

ES6 (ECMAScript 2015) introduced several powerful array methods that significantly simplify working with arrays in JavaScript. Among these methods, map, filter, and reduce stand out as versatile tools for transforming, filtering, and aggregating data in arrays. In this guide, we'll explore these three methods and demonstrate how to use them effectively.

The map Method

The map method is used to create a new array by applying a provided function to each element of an existing array. It's particularly useful for transforming data in an array without modifying the original array.

Syntax:

const newArray = array.map(callback(currentValue[, index[, array]]) {
  // Transformation logic here
}, thisArg);
Enter fullscreen mode Exit fullscreen mode

Example:

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((number) => number * 2);

console.log(doubled); // Outputs: [2, 4, 6, 8, 10]
Enter fullscreen mode Exit fullscreen mode

The filter Method

The filter method is used to create a new array containing all elements that pass a provided test (predicate) function. It's a powerful tool for selecting specific elements from an array.

Syntax:

const newArray = array.filter(callback(element[, index[, array]]) {
  // Test logic here
}, thisArg);
Enter fullscreen mode Exit fullscreen mode

Example:

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((number) => number % 2 === 0);

console.log(evenNumbers); // Outputs: [2, 4]
Enter fullscreen mode Exit fullscreen mode

The reduce Method

The reduce method is used to reduce an array to a single value by applying a provided function to each element, accumulating the result. It's often used for tasks like summing values, finding the maximum or minimum, or concatenating strings.

Syntax:

const result = array.reduce(callback(accumulator, currentValue[, index[, array]]) {
  // Accumulation logic here
}, initialValue);
Enter fullscreen mode Exit fullscreen mode

Example:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber, 0);

console.log(sum); // Outputs: 15
Enter fullscreen mode Exit fullscreen mode

Combining Methods

These array methods can be combined to perform complex operations on arrays. For example, you can use filter to select specific elements from an array and then map to transform those selected elements.

const numbers = [1, 2, 3, 4, 5];

const squaredEvenNumbers = numbers
  .filter((number) => number % 2 === 0) // Select even numbers
  .map((number) => number ** 2); // Square them

console.log(squaredEvenNumbers); // Outputs: [4, 16]
Enter fullscreen mode Exit fullscreen mode

Conclusion

The map, filter, and reduce methods are powerful tools for manipulating arrays in JavaScript. They enable you to write concise and expressive code for transforming, filtering, and aggregating data. Understanding these methods and when to use them is crucial for mastering ES6 and writing more efficient and readable JavaScript code.

Estimated Reading Time: 5 minutes

Top comments (0)