Map, filter, and reduce method in JavaScript

#javascript

I see a lot of peoples are getting confused when it comes to map, filter, and reduce method in JavaScript. Let's understand these array methods, one by one.

1. Map() method

Whenever we apply map method on an existing array we will get a new array, because of this our original array remain the same, its value will not change.

In simple words we can say that, with the help of map method we can transform an array.

Have a look at the syntax of the map method.

Array: This is the original array on which we want to perform map method.

callback: This is the function that will be called for every element of the original Array.

value: It is value we get from original array and can make changes to it. We will understand it with the help of an example.

index: It is the index of the value, it is optional.

array: It is the original array, it gives the same array on each iteration.

Let's understand with example:

In the above example, first we have created an array name originalArr with some numbers. And after that we are console logging the value in originalArr.
Now we are using map method over originalArr to get multiple of 2 of each element in the originalArr.

On the other hand, map method will return all the values to the array name newArr by multiplying them with 2.

Now we will check the originalArr, it will remain the same.

2. Filter() method

This method is used for filtering out the values from an Array based on some logic.

What I mean by this:

For example:
Consider this array of numbers,

const numberOneToHundred = [1,2,3,.....,100];

someone says get all the even number from this given array, or
get all the numbers that are greater than 50,
or get all the numbers which are divisible by 10.
So in all of the above examples we are using filter method to get all the values from an array based on some logic.

First we see the syntax and then we move on the example of the filter method.

Syntax:

Filter method example:

In the above example, we have an array of age of all members in the family, now we will look after for those people only who are above 18.

So filter method will filter out all the values which are greater than 18 and return a new array to the whoCanDriveCar variable.
And the original array will remain the same, filter method will return a newly created array.

3. Reduce() method

We use reduce method where we want to come up with a single value from a given array.

When you look at the meaning of reduce you will find that to make something smaller or less, so that is what reduce() method is doing.

For example: On applying reduce method on an array of numbers, we can find out the sum of all the digits, and come up with the single value.

reduce method example

In the above example, we are getting sum of the values in the numbers array. In the callback method we have two parameters: accumulator, and value. What accumulator is doing in the above code is, it is storing the result on each iteration of the reduce method on callback function.
The second argument in the reduce method is initialValue of the accumulator, which in this case is initialised with 0.
So what actually happened here, from a given array, we come up with a single value.

Note: This is my first post, if I miss something, then please let me know, your feedback will be really helpful.