The Most POWERFUL [JavaScript] Function

.ltag__user__id__386677 .follow-action-button { background-color: #339d15 !important; color: #ffffff !important; border-color: #339d15 !important; }

Clean Code StudioFollow

Clean Code StudioClean Code Clean Life ~ Simplify

Today we are going to learn about the most powerful function, I believe, that exists within the entirety of JavaScript.

Let's dive in to THE MOST POWERFUL [JavaScript] function

Array.reduce

What does reduce do? Why is it so powerful?

Well, here's the technical definition of reduce...

Array.prototype.reduce()

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Not very helpful if you ask me, so LET'S LEARN BY DOING

Using Reduce - The most powerful function in all of JS

0. A few pre-tutorial notes

• I created a YouTube screencast covering all of the coding examples. This article dives into a bit more detail than parts of the screencast - but some of the more advanced coding examples themselves may be easier to follow via screencast.

• The examples we start with are super easy. The advanced examples are towards the bottom of the article. Feel free to skip ahead based on your comfort level. The intermediate to advanced examples are where you'll find powerful real world use cases. Scroll down to find those once you're comfortable with the beginner examples.

1. Find total of all numbers summed

[3, 2.1, 5, 8].reduce((total, number) => total + number, 0)// loop 1: 0 + 3// loop 2: 3 + 2.1// loop 3: 5.1 + 5// loop 4: 10.1 + 8// returns 18.1

2. Find total of all numbers multiplied

[3, 2.1, 5, 8].reduce((total, number) => total * number, 1)

As shown, it's pretty easy to add or multiply all of the numbers in an array. But, c'mon - I said reduce is THE MOST POWERFUL FUNCTION IN ALL OF JS.

Obviously, there has to be more to reduce - right?

Let's say we have 3, 4, 10, and 60. Let's say we want to get some of the values.

Or, more specifically, we want to filter the values and only return the values if they are less than 10.

Normally, we can simply use the filter function and only return the numbers if they are less than 10.

3. Array.Filter using reduce

[3, 4, 10, 60].filter(number => number < 10)

Well, with reduce - we can do the exact same thing.

[3, 4, 10, 60].reduce((list, number) =>    number < 10      ? [...list, number]      : list, [])

And lala, we replaced filter with reduce - pretty cool but let's be honest. This STILL DOESN'T justify reduce as being THE MOST POWERFUL FUNCTION IN ALL OF JavaScript.

What if I told you, we could continue down this path and replace just about every array function in JavaScript using reduce?

3. Re-creating Array.some using Array.reduce

[3, 4, 10, 50].some(number => number < 50)// returns true (We have some numbers in the array are less than 50)

Using reduce, we simply set the initial value to false. If the condition is already true then we return the condition. If the condition is not already true then we check if the current number meets our condition.

[3, 4, 10, 50].reduce((condition, number) =>    condition === true         ? condition       : number < 50, false)

Notice, this time we start with a bool (false) as our initial value instead of using a number or an array.

We have now summed, multiplied, filtered, and re-created some (aka conditionally checking something on our array using reduce).

We could go on to also replace the Array.every function using Array.reduce, but since that is similar to replacing Array.some using Array.reduce we'll just note that we can easily do that as well.

4. What about Array.join using Array.reduce?

Replacing Array.join with Array.reduce

['truck', 'car', 'people'].join('-')// "truck-car-people"

Using Array.reduce we can code the following

['truck', 'car', 'people'].reduce((text, word) => `${text}-${word}`, '')// "-truck-car-people"

Notice the output has a preceding dash at the front.

The callback function accepted as the first argument for the Array.reduce function accepts more parameters. We can use the third accepted parameters to track our index for our reduce function

['truck', 'car', 'people'].reduce((text, word, index) =>     index === 0       ? word        : `${text}-${word}`, '')// "truck-car-people"

With that 3rd parameter set up, this reduce function will now act exactly how the original Array.join acts

With that, so far we have used reduce to replace.

• Array.map
• Array.filter
• Array.every, Array.some
• Array.join

5. Array.concat using Reduce

What about concat? Where you can concat an array of "1", "2", and "3" with another array?

[1, 2, 3].concat(['hey', 'world', 'mars'])// [1, 2, 3, 'hey', 'world', 'mars']

How would you concat or combine arrays reduce?

[[1,2,3], ['hey', 'world', 'mars']].reduce(   (list, array) => [...list, ...array],[])// [1, 2, 3, 'hey, 'world', 'mars']

What's cool about combining arrays using Array.reduce is that we can "concat" as many arrays as we want to.

Simply, by passing in more arrays we will automatically combine aka concatenate them using reduce.

With that, we have replicated Array.concat using Array.reduce

Let's get into a few more examples.

First, let's create a few people.

let sarah = { name: 'sarah', email: '[email protected]', id: 1 }let tim = { name: 'tim', email: '[email protected]', id: 2 }let len = { name: 'len', email: '[email protected]', id: 3 }

6. Grouping People By Names using Array.reduce

Example of what we want when we group people by names

people.len// Gets Len// { name: 'len', email: '[email protected]', id: 3 }people.sarah// Gets sarah// { name: 'sarah', email: '[email protected]', id: 1}

Grouping people by their names using reduce

• Make the initial value for our reduce function an object
• Build an object where
  • The key is the person's name ([person.name])
  • The value is the person object ([person.name]: person)

Example (That won't work)

let people = [sarah, tim, len].reduce((people, person) => {   [person.name]: person,   ...people}, {}) 

In the example above we'll get an error

Uncaught SyntaxError: Unexpected token ':'

Whenever we use a short hand function to return an object we need to wrap it in parentheses

• Wrap the returned object's brackets in parentheses to fix the error

let people = [sarah, tim, len].reduce((people, person) => ({   [person.name]: person,   ...people}), {}) 

And lala, we now have a people object where the people are grouped by their name

If we go people.len we get len

people.len // { name: 'len', email: '[email protected]', id: 3 }

If we go people.sarah we get sarah

people.sarah // { name: 'sarah', email: '[email protected]', id: 1 }

If we go people.tim we get tim

people.tim // { name: 'tim', email: '[email protected]', id: 2 }

If we want all of our people?

// people {   sarah: { name: 'sarah', email: '[email protected]', id: 1 },   tim: { name: 'tim', email: '[email protected]', id: 2 },   len: { name: 'len', email: '[email protected]', id: 3 },}

7. Plucking an array of values by a given key using Reduce

More than that, what if we wanted to get just the names of the people?

let names = [sarah, tim, len].reduce((names, person) => [   ...names,   person.name], [])// ['sarah', 'tim', 'len']

What if we wanted to get just the emails of the people?

let emails = [sarah, tim, len].reduce((emails, person) => [   ...emails,   person.email], [])// ['[email protected]', '[email protected]', '[email protected]']

8. Flattening multiple levels of nested Arrays using Reduce

More than that, what if we had an array of nested arrays?

let list_of_arrays = [    ['sub_one', 'sub_two', 'sub_three'],    [       ['nested_sub_one', 'nested_sub_two'],        ['nested_sub_three', 'nested_sub_four']    ],    'one',    'two',    'three']

Let's take our list of arrays, and lets of course use reduce

list_of_arrays.reduce((flattened, item) => {   if (Array.isArray(item) === false) {      return [...flattened, item]   }   if (Array.isArray(item) && Array.isArray(item[0])) {      return [         ...flattened,         ....item.reduced((flatten, nested_list) => [...flatten, ...nested_list, [])       ]      ]   }   return [...flattened, ...item]}, [])

And lala, we've flattened our list of multiple level nested arrays.

Output

["sub_one", "sub_two", "sub_three", "nested_sub_one", "nested_sub_two", "nested_sub_three", "nested_sub_four", "one", "two", "three"]

Note:

We only handled nested sub arrays up to 3 levels deep, but you could of course spend some more time on the function and use recursion to pretty simply flatten an array infinite nested levels deep using reduce.

More POWERFUL use cases for Reduce

Alright, so now let's dive into some of the more Powerful, not as oftenly used - use cases for Array.reduce.

9. Apply Formatters on Strings

I'm going to start off with an array of strings.

let strings = ['cool-link', 'hello world of javascript', 'goodbye, its been swell']

Next let's create an array of formatters. Normally, I'd call these filters - but they're not really filters. They're just formatting the string.

These formatters are actually going to be callback functions.

First, we'll create a dashes to spaces formatter (replace dashes with spaces). Will use regex to implement this formatter.

let dashesToSpaces = str => str.replace(/-/g, ' ')

Next, we'll create a capitalize string formatter.

let capitalize = str => `${str[0].toUpperCase()}${str.slice(1)}`

Then, we'll create a string limiter formatter.

If the string is greater than a given length, replace the characters after that length limit with three dots.

let limiter = str => str.length > 10 ? `${str.slice(0, 10)}...` : str 

Finally, we'll create a formatters array with all of our string formatters.

let formatters = [dashesToSpaces, capitalize, limiter]

Remember we have our array of strings.

let strings = ['cool-link', 'hello world of javascript', 'goodbye, its been swell']

Our Goal:

Our goal is to apply every single formatter from our formatters array onto every single string from our strings array.

Using reduce, we can simply do this like so!

strings.reduce((list, str) => [      formatters.reduce((string, format) => format(string), str),      ...list   ],[])

_And just like that, we used reduce to apply an array of formatters on an array of strings. _

Original Strings Array

['cool-link', 'hello world of javascript', 'goodbye, its been swell']

Output (After using reduce to apply string formatters)

["Goodbye, i...", "Hello worl...", "Cool link"]

10. Group students by rooms (using reduce)

First let's create some students

let students = [   { name: 'Sally', room: 'A' },   { name: 'tim', room: 'A' },   { name: 'nick', room: 'B' },   { name: 'rick', room: 'C' },   { name: 'sarah', room: 'B' },   { name: 'pam', room: 'C' }]

We want to group the students by their room

So what we're going to do is use students.reduce.

students.reduce((class_rooms, student) => ({}), {})

Notice we use the parentheses around the object we're implicitly returning again. When we use a short hand function to return an object we have to use ({}) syntax - if we attempt to directly return an object without the wrapping () we'll get an error.

Next, we want to use the student room as the key:

students.reduce((class_rooms, student) => ({   ...rooms,   [student.room]: rooms[student.room]        ? [...rooms[student.room], student]        : student}), {})

Now, we have our students grouped by their rooms/classes.

{   A: [{ name: 'sally', room: 'A' }, { name: 'tim', room: 'A' }],   B: [{ name: 'nick', room: 'B' }, { name: 'sarah', room: 'B'}],   C: [{ name: 'rick', room: 'C' }, { name: 'pam', room: 'C' }],}

We have successfully grouped our students by their rooms - so that is how we group by reduce.

So guys, that's about all I've got with reduce. I guess the biggest takeaway is that reduce is a super method - it really is!

You can do just about anything you can do with any other Array method using reduce.

Instead of going Array.filter.map.filter.forEach, you could use a single reduce function to accomplish the same goal.

If you need to group a whole bunch of object by their keys, use reduce.

If you need to pluck the values related to a given key? Use reduce.

If you need to apply multiple filters but don't want to raise the time complexity by iterating multiple times over through the same array - use reduce.

If you want to flatten an array of nested arrays where each nested array may have more nested array while each nested array also may not have any nested arrays? Use reduce.

If you need to sum some number, multiply some numbers, subtract sum numbers, or do some arithmetic of any sort - reduce works again.

What if you need to combine some arrays? Use reduce.

What if you need to combine some objects? Use reduce.

What if you want to have a method in your back pocket that you know can do it all and just makes you feel more powerful and efficient as a software engineer?

Use reduce!

In my opinion, forEach is the most over rated method in the JavaScript eco-system and reduce is the most under rated method in the JS eco-system.

As a final example of how cool reduce is let's take this final example.

[{ name: 'Clean Code Studio' }, { belief: 'Simplify!' }, { should_follow: 'Si, senor!' }].reduce((last_example, partial) => ({    ...last_example, ...partial }), {})

What does this return? It merges all of the objects.

{   name: 'Clean Code Studio',   belief: 'Simplify',   should_follow: 'Si, senor!'}

.ltag__user__id__386677 .follow-action-button { background-color: #339d15 !important; color: #ffffff !important; border-color: #339d15 !important; }

Clean Code StudioFollow

Clean Code StudioClean Code Clean Life ~ Simplify

Using reduce you can filter, you can apply, you can apply a list of callbacks, you can flatten, merge, combine...

I highly recommend that you become familiar, competent, and over all familiar when it comes to using reduce.

So again, using reduce you have two parameters.

• accumulator - callback function
• initial value - used during the first iteration by the accumulator callback function

[].reduce(accumulatorCallbackFunction, initialValue)

The Accumulator callback function has four parameters

• accumulator - the value returned from the callback function after each iteration
• item - element from the array
• index - the index for the current element being passed into the accumulator callback
• source - the original array reduce is being called on

let initial = []let callback = (accumulator, item, index, source) => {}[].reduce(callback, initial)

Finally, the last bonus tip - what if you want to break out of reduce before you're done iterating through all of the items?

[].reduce((build, item, index, source) => source.slice(index), 0)

By slicing the source array at the given index, you'll break out of the reduce functions loop - thus if you have a big data set, you can stop using computational resources once a condition is met.

With that, I'll close out by saying I highly recommend practicing reduce. It is the JavaScript function that I have found the absolute most use out of. So many times, reduce has been the solution to solving complex coding challenges in a concise and to the point way.

For demo's on every single Array.reduce concept we covered here. Checkout the screencast I created - we dive deep into reduce. We start from simple and build up to eventually cover all of the examples shared in this post.

Thanks for tuning in, and if you have any comments - questions - or concerns, the comment section is right below :)

Clean Code Studio
Clean Code Clean Life
Simplify

.ltag__user__id__386677 .follow-action-button { background-color: #339d15 !important; color: #ffffff !important; border-color: #339d15 !important; }

Clean Code StudioFollow

Clean Code StudioClean Code Clean Life ~ Simplify

Did you know I have a newsletter?

If you want to get notified when I publish new blog posts or make major project announcements, head over to https://cleancodestudio.paperform.co/