A Brief Introduction to JavaScript Map, Filter and Reduce Methods
Tags: javascript
Published: 2020-07-26 15:40:51

# Introduction

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. 

The methods we are discussing here are some __higher-order functions__ available in JavaScript. Higher-order functions are those functions which take a function as an argument or returns a function as an output. On the other hand, we typically use first-order functions. First-order functions neither takes a function as an argument nor returns a function as an output. 

# Map

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

### Syntax

```javascript
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

### Example

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

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,

```javascript
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 see how much longer is this method. We can shorten the code by using `forEach` but still, it'll be larger than using the `map` function.

The `map` method takes an array and returns a new array of  __same size__.

![](https://i.ibb.co/jVKNn9x/map-function.png)

To learn more about the `map()` method, you can check the article [here](https://www.digitalocean.com/community/tutorials/4-uses-of-javascripts-arraymap-you-should-know).

# Filter

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

### Syntax

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

The `filter()` function 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.

### Example

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

```javascript
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,

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

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

So, the `filter` function always returns an array smaller than the original array.

![](https://i.ibb.co/P9r9FgB/filter.png)

To know more about the method, you can check this [article](https://www.geeksforgeeks.org/javascript-array-filter-method/).

# Reduce

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

### Syntax

 ```javascript
arr.reduce(callback[, initialValue])
 ```

Let's see the reduce function in action

### Example

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,

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

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

```javascript
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
```

So, as we've seen the `reduce` will return a single value.

![](https://i.ibb.co/8M1hJjS/reduce.png)

To know more about the `reduce()` method, you can check this article [here](https://alligator.io/js/finally-understand-reduce/).

The `reduce` function is a hugely powerful function and most of us do not use it at its full potential. I'd recommend checking the article I shared above.

## Conclusion

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.