ยท

# 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

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

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

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

# Filter

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

### Syntax

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

``````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) {
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.

# 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

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

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

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