DEV Community

Cover image for JS Guide: Map, Reduce, Filter and forEach Methods
Burak Boduroğlu
Burak Boduroğlu

Posted on • Updated on

JS Guide: Map, Reduce, Filter and forEach Methods

Post Topics


In JavaScript, Map, Reduce, Filter, and forEach methods are commonly used in functional programming paradigms. Each of these methods serves a specific purpose and can be used to manipulate arrays or iterables in a functional and declarative manner. Here's a brief description of each method and its functional programming application:


Describe Methods

Map

The map method is used to transform each element of an array into a new value, creating a new array with the transformed values. It applies a provided function to each element and returns an array of the same length as the original, with each element transformed based on the function's logic. The original array is not modified. map is useful for performing one-to-one transformations.

Reduce

The reduce method is used to reduce an array to a single value by iteratively applying a function to each element of the array. It takes an accumulator and a current value and returns the updated accumulator value for the next iteration. The final result is the accumulated value. reduce is useful for operations like summing the elements, finding the maximum or minimum value, or any operation that requires combining values from an array.

Filter

The filter method is used to create a new array with elements that pass a certain condition. It applies a provided function to each element and includes the elements in the resulting array if the function returns true. filter is useful for selectively extracting elements from an array based on specific criteria.

forEach

The forEach method is used to perform an operation or side effect on each element of an array without creating a new array. It applies a provided function to each element but does not return anything. forEach is useful for executing a function for its side effects, such as logging, updating external variables, or making network requests.

Examples of Methods

  • Map Example
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map((num) => num * num);
// squared is now [1, 4, 9, 16, 25]
Enter fullscreen mode Exit fullscreen mode

Explain: The given code declares an array called numbers with values [1, 2, 3, 4, 5], and then uses the map method to iterate over each element of the numbers array and apply the arrow function (num) => num * num to square each number. The resulting squared values are stored in a new array called squared, which becomes [1, 4, 9, 16, 25].


  • Reduce Example
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
// sum is now 15
Enter fullscreen mode Exit fullscreen mode

Explain: In the given code, the reduce method is used on the numbers array. The arrow function (acc, num) => acc + num is applied iteratively to each element of the array. The reduce function starts with an initial value of 0 (0 is passed as the second argument to reduce). During each iteration, the current element num is added to the accumulator acc. At the end of the reduction process, the final accumulated value is stored in the sum variable, which becomes 15 in this case, as it represents the sum of all the numbers in the array [1, 2, 3, 4, 5].


  • Filter Example
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
// evenNumbers is now [2, 4]
Enter fullscreen mode Exit fullscreen mode

Explain: In the provided code, the filter method is used on the numbers array. The arrow function (num) => num % 2 === 0 is applied to each element of the array.
The condition num % 2 === 0 checks if the number is even. If the condition evaluates to true, the number is included in the resulting array. Otherwise, if the condition is false, the number is filtered out. In this case, the resulting array evenNumbers contains only the even numbers from the original numbers array, which are [2, 4].


  • forEach Example
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => console.log(num));
// prints each number in the array
Enter fullscreen mode Exit fullscreen mode

Explain: In the given code block, the forEach method is used on the numbers array. The arrow function
(num) => console.log(num) is executed for each element of the array. During each iteration, the arrow function is called with the current element num as its argument. In this case, the arrow function simply logs the value of num to the console using console.log(). As a result, when this code block is executed, it will print each number in the numbers array to the console, one by one.


  • Follow me on 👾 YouTube and Github link in bio.
  • Thank you for taking the time to read our blog post. Your support is greatly appreciated!🙋

References:

My other contents

Top comments (0)