# A Brief Introduction to JavaScript Map, Filter and Reduce Methods

# JavaScript Map, Reduce and Filter Functions

# 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.

# Map

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. 

### 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 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](https://www.geeksforgeeks.org/javascript-array-map-method/).

# Filter

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

### Syntax

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

### 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.

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

# Reduce

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. 

### 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 = 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,

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

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

## 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.