This content originally appeared on DEV Community and was authored by Clean Code Studio
"
Today you will learn about rarely shown, real-world applicable, and incredibly powerful ways to utilize THE **MOST POWERFUL** (JavaScript) Function to simplify & improve your day-to-day developer experience."
Array.reduce
"
Array.reduceis THE MOST POWERFULJavaScript Function.PERIOD."
- Yes, I do know this is technically an opinion.
- Oh yah, it is an opinion I full-heartedly believe.
- Yep, this post does dive into why you have this opinion too.
Although an opinionated statement, I full-heartedly believe Array.reduce is the most powerful function in JS.
You read the entire article, and still disagree with me?
- I challenge you to wage war with me in the comments sections
- What's your opinion on JS having a best function?
- Where do you disagree with my line of thinking?
- What's your function you believe is better in JavaScript?
Now that you have your open invite to freely challenge my opinions via the comment section below, I'm super excited for us to delve into the world of Array.reduce and cover the technical side of JS's most amazing function.
Let's dive in!
Array.reduce (The MOST POWERFUL JS Function. PERIOD)
Opening Notes
Note 1: Related YouTube Video
Walks through all coding examples covered in this article.
Note 2: Advanced Examples = real-world examples. Easy Examples = non real-world examples.
We start with easy examples. These are NOT real-world examples. These are to understand how to use Array.reduce. The Intermediate and Advanced examples are real world examples. The Intermediate and Advanced examples are further down the page. Scroll down if the beginner examples are easy for you or boring to you. We dive deeper, we just slowly work our way there.
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
1. Find total of all numbers summed (using reduce)
[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
reduceas 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.everyfunction usingArray.reduce, but since that is similar to replacingArray.someusingArray.reducewe'll just note that we can easily do that as well.
4. What about Array.join using Array.reduce?
Replacing
Array.joinwithArray.reduce
['truck', 'car', 'people'].join('-')
// "truck-car-people"
Using
Array.reducewe 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.reducefunction accepts more parameters. We can use the third accepted parameters to track ourindexfor 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.joinacts
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.reduceis 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.concatusingArray.reduce
Let's get into a few more examples.
First, let's create a few people.
let sarah = { name: 'sarah', email: 'sarah@gmail.com', id: 1 }
let tim = { name: 'tim', email: 'tim@gmail.com', id: 2 }
let len = { name: 'len', email: 'len@gmail.com', 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: 'len@gmail.com', id: 3 }
people.sarah
// Gets sarah
// { name: 'sarah', email: 'sarah@gmail.com', 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: 'len@gmail.com', id: 3 }
If we go people.sarah we get sarah
people.sarah // { name: 'sarah', email: 'sarah@gmail.com', id: 1 }
If we go people.tim we get tim
people.tim // { name: 'tim', email: 'tim@gmail.com', id: 2 }
If we want all of our people?
// people
{
sarah: { name: 'sarah', email: 'sarah@gmail.com', id: 1 },
tim: { name: 'tim', email: 'tim@gmail.com', id: 2 },
len: { name: 'len', email: 'len@gmail.com', 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
], [])
// ['sarah@gmail.com', 'tim@gmail.com', 'len@gmail.com']
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((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!'
}
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
"Array.reduce is JavaScript's MOST POWERFUL function. Period"
Opinionated statement? Maybe a wee-bit...:)
It is an opinion of mine that I full-heartedly believe.
Knowing I'm using an absolute statement to share an opinion, I openly invite anyone who does disagree with me to battle it out with me in the comment section below.
I will go to war to back my belief in this statement, will most likely embarrass you utilizing my very large vocabulary, and will call on both true as well as fabricated life experiences to justify my statements if for nothing else than to save face.
So, admittedly, you most likely won't get me to admit you're right and I'm wrong - but, that doesn't mean I won't think on what you've written and the reasons for your disagreement. Plus, you will have other developers reading this article and you have a contradicting opinion or belief it is always helpful for learning engineers at any level to see clashing insights, beliefs, and opinions.
Will all of this on table, this is a direct invitation to you - as a reader of this article. Let's fight it out in the comments if you disagree and provide all readers with multiple perspectives.
On the other hand, if you also believe what I'm saying to be true - then congragulations, you're on the side of the good guys. Add a comment about something useful you learned from this article or why you personally believe Array.reduce is THE MOST POWERFUL JS FUNCTION.
In fact, I'll personally heart your comment and reply to you with an over the top reply intended to boost your ego if you simply comment:
"
Array.reduceis the MOST POWERFUL JavaScript Function. Period."
With my invite for you to comment below either to wage war against or in favor of my absolutely opinionated statement you should also believe to be true, I say let's dive in!
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/
This content originally appeared on DEV Community and was authored by Clean Code Studio
Clean Code Studio | Sciencx (2021-07-28T08:35:17+00:00) The Most POWERFUL [JavaScript] Function. Retrieved from https://www.scien.cx/2021/07/28/the-most-powerful-javascript-function/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.