A Brief Introduction to JavaScript Map, Filter and Reduce Methods

A Brief Introduction to JavaScript Map, Filter and Reduce Methods

Subha Chanda's photo
Subha Chanda

Published on Jul 13, 2020

4 min read

Subscribe to my newsletter and never miss my upcoming articles

JavaScript Map, Reduce and Filter Functions


Arrays are important Data Structures in programming. All the methods which we are going to discuss in this article will iterate over an array and return a new array based on the result function we define. The results we'll get here can also be achieved using loops, but it'll make the code more lengthy.


We use the map() method to create a new array from an existing one by applying a function to each of the elements in the array.


array.map(function(currentValue, index, arr), thisValue)

In the arguments, we can execute the function by passing only the currentValue also. Let's see an example


const array = [3, 6, 9, 12];
const square = array.map((item) => item * item);

In the above example, we created a new array named square by passing only the currentValue. Now, if we wanted to write the same square function with imperative style, the code will look something like this,

const numbers = [3, 6, 9, 12];
const square = (numbers) => {
  let newArray = [];
  for (let i = 0; i < numbers.length; i++) {
    newArray.push(numbers[i] * numbers[i]);
  return newArray;
console.log(square(numbers)); //[ 9, 36, 81, 144 ]

We can clearly see how much longer is this method. We can shorten the code by using forEach but it'll also be larger than using the map method.

To learn more about the map() method, you can check the article here.


As the name suggests, the filter() method is used to filter items of an array based on a certain condition.


array.filter(callback(element, index, arr), thisValue)

The filter() method basically takes each element of the array and applies the specific condition we define. If the element satisfies the condition then the item is pushed to a new array.


We'll try to return an array which filters odd numbers from an given array. In declarative approach we would write something like,

const arr = [2, 3, 4, 5, 6];
const odds = arr.filter((i) => i % 2 !== 0);
console.log(odds); //[3, 5]

Now, if we try to get the same result using the imperative way, we have to write something like this,

const odds = (arr) => {
  let oddArray = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 !== 0) {
  return oddArray;
console.log(odds(arr)); //[3, 5]

Which shows how much more code we need to achieve the same result.

To know more about the method, you can check this article.


The reduce method is the least used among the three methods we are discussing here. This method reduces a whole array into a single value and returns it.


arr.reduce(callback[, initialValue])

Let's see the reduce function in action


Suppose we want to add the items of an array. We are taking this example because the function will return only a single value. To implement this using the reduce() method, we can write the code like this,

const arr = [2, 3, 4, 5, 6];
const sum = arr.reduce((result, item) => {
  result = result + item;
  return result;
console.log(sum); //20

It's literally two lines of code. Now, the same code using a for loop will look like this,

const sum = (arr) => {
  let result = 0;
  for (let i = 0; i < arr.length; i++) {
    result = result + arr[i];
  return result;
console.log(sum(arr)); //20

To know more about the reduce() method, you can check the article here.


I hope this article gave you an idea about the JavaScript map(), filter(), and reduce() method. The links of the articles provided below each of the methods will give you a more in-depth knowledge of each method.

Did you find this article valuable?

Support Subha Chanda by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
Share this