JavaScript map(), filter(), reduce() Illustrated

Umm…

So, what exactly are map(), filter() and reduce()?

They are JavaScript methods of ECMAScript 5 version used to manipulate data in an array.

These methods help in managing complexity and improving readability.

Let’s Buckle up and land on ECMAScript 5 planet to know more about these methods.

source

Format

Here, I will go over each method in the following format

1. The What (with an orange analogy😉)
2. Input and Output
3. Syntax
4. Examples (with comic heroes 😍)
5. Takeaways
6. Conclusion

Map()

The What?

map() is a method applied on arrays which return a new array after performing given action on each element without disturbing the original array.

Imagine you have a basket full of oranges and want to peel each one of them. Also, you want to place peeled oranges in a new basket.

I know, such a tedious task. Ta-da!! you do have an assistant named map. Now, what’s the plan?

You give him a basket full of oranges and ask him to peel. You tell him how to peel too. Easy!!

He peels each orange and gives a new basket full of peeled ones.

Source: Ppt of Kyle Simpson’s course on Front-end masters

Input and Output

• input is an array
• output is a new array with the provided actions performed

When to use

• Perform an action on every value of an iterable
• When you want a whole new array without disturbing the original array while performing a set of actions on the array

Syntax

Let’s go through each parameter,

• function(): a callback function
• currentValue: It’s value of the current element (required parameter)
• index: It’s index of the current element (optional parameter)
• arr: It’s the array the map was called upon ie.., the original array (optional parameter)
• thisArg: Value to use as this inside the callback (optional parameter)

Examples

• First, let’s go over the basic example of doubling integer values in an array
• And deal with objects

So, first, let me explain how we could solve a basic problem without using map and then why map is a better option.

Code to double integers in an array using for, forEach, and map

• Using for

• Using forEach

• Using map

Takeaways:

• map vs for/forEach: We don’t need to create an empty array and push the new values into it while using map()
• map vs for: We don’t need to maintain the index of the item

Objects and Map

• Without map

• We don’t need to create a whole new array when we use map.

filter()

The What?

Filter() is a method applied on arrays which returns a new array with all elements that pass the test implemented by the provided function. It returns an empty array if none of the elements pass the test. It doesn’t change the original array.

Imagine you have a basket full of oranges and want to peel those which are in good condition. Also, you want to place the peeled ones in a new basket.

Again, you have an assistant named filter. So, what’s the plan?

You give him the basket and ask him to peel those which are in good condition (ie.., filter in). You tell him how to find an orange which is in a good condition.

Work was done!! he peels those which are in good condition and returns a new basket filled with them.

Source: Kyle Simpson’s course on Frontend masters

Remember, we filter-in the values, not filter-out ie.., the elements which evaluate to true will be added to the array.

Input and Output

• input is an array
• output is a new array with elements that pass the condition.

When to use

• When you want a whole new array with desired values.

Syntax

• It’s the same as map

Just like map parameters,

• currentValue: It’s the value of the current element (required parameter)
• index: It’s the index of the current element (optional parameter)
• arr: It’s the array the map was called upon ie.., the original array (optional parameter)
• thisArg: Value to use as this inside the callback (optional parameter)

Examples

• First, let’s go over the basic example of finding even numbers in an array
• And deal with objects

Finding Even numbers in an array

Takeaways:

• The above problem can be solved using for or forEach. But, we need to create a new empty array and push the values into it

Objects and filter

Let’s take the following example

• Let’s find those who don’t belong to DC

Without filter

With filter

Takeaways:

• With filter, we can write less complex and more readable code
• Also, we don’t need to create a whole new array

Reduce()

The What?

Reduce() is a method applied on arrays which executes a reducer function on each element of the array and returns a single output. It won’t execute the function if the array is empty.

Imagine you have a basket full of oranges. You want to make a jar full of juice with all of them.

Again, you have an assistant named reducer. What are you waiting for? 😃

You give him a basket full of oranges and ask him to make juice. You tell him how to make it.

He takes all oranges and gives you a jar of juice (a good assistant 😜)

Source: Ppt from Kyle Simpson’s course on Frontend Master’s

Input and Output

• Input is an array
• Output is a single value of the desired type

When to use

• When you want to deal with each element of an array to get a single desired output

Syntax

Let’s go through each parameter,

• accumulator: The initialValue or the previously returned value of the function (Required parameter)
• currentValue: The current element of the array (Optional parameter)
• currentIndex: Current index of the element (Optional parameter)
• arr: The original array (Optional parameter)
• initialValue: Initial value of the accumulator. If nothing is passed, it used the first element of the array as the initial accumulator value (Optional parameter)

Examples

• Let’s go over a basic example of summing up the values of an array
• And deal with objects

Summing up the values of an array

Objects and Reduce

• To get heroes who belong to DC

Takeaways:

• When you want to deal with every element in an array desiring a single value output
• Also, if you want to get a single value output passing a condition, use the filter, and reduce together.

Conclusion

• Use map(), filter() when you want to perform actions but, don’t want to disturb the original array
• map(), filter() return a whole new array
• Use reduce() when you want to use every element of an array to get a single desired value
• Using map(), filter() and reduce() make your code less complex and more readable

Thanks to Kyle Simpson, javaScript Teacher and FreeCodeCamp!