.map, .filter, .reduce by making a fresh fruit salad (🥗).Any good fruit salad should be brimming with nice stuff; carefully selected, chopped and mixed into a tasty bowl of goodness.
They're also great for explaining JavaScript's more functional methods, which undoubtedly will be a good addition to your developer skills.
Hungry yet? Good. Let's get chopping with some basic examples.
Since there's not much fun with a fruit salad if we just throw in our fruits as they are into a bowl and call it a day (that's just a bowl of fruit, eck...), we'll chop them into pieces first. .map
works wonders for this. Let's try it out.
What! Our fruits got sliced and diced into 4 pieces each and returned to us in a neat container arranged by type. I wish my kitchen could do that in real life.
So, what's happening? By running the .map method on our fruits Array, we end up with this neat Array of Objects:
Behind the scenes, .map will loop through your array, apply the transformations that you defined, and finally return a new array with the transformed data back to you. What's key here is that the new array it's own copy,
and not that the original array was altered (or "mutated").
Since it's a completely new array, we don't have to worry about our original array being permanently changed. It's not, which allows us to keep transforming the original into many different directions, if you need to.
This "immutability" is a common trait for both .map, .filter, and .reduce, and it's generally a good thing to keep in mind when you want to avoid unwanted side effects when working with arrays.
Oh no! We've accidentally chopped a super spicy chili pepper into our lovely fruit salad. That won't do - unless you like a fiery kick with your fruit.
If this was in a real kitchen, we'd have to tediously pick out all the pepper pieces, wasting our time. Luckily, we don't have this problem in JavaScript as we can just use .filter to pick out that chili in a zinch. Let's
give it a shot.
Ah, much better. The .filter method makes it easy for us to include or exclude items in an array (or arrays of Objects) and continue using the newly returned, and filtered, array for new stuff.
Keep in mind, that filtering doesn't always mean filtering things out as in a x !== y fashion. It can just as well be the other way around as in "give me only that 🌶️ and leave out the rest", by saying fruit.type ===
'🌶️'.
Finally, without any fiery surprises, we can mix our tasty fruit pieces together into a grand fruit salad. The .reduce method is great for this, since it allows us to loop through all of our chopped fruits and
add them into the bowl one by one until we end up with one, finished and mixed bowl.
Let's have a look at that.
We did it! With a little help from .reduce we could mix all our fruit pieces into one bowl. So, what happened here?
.reduce is a very interesting method that can do tons of complex stuff, which is out of scope for this piece, but the gist of is that you "take multiple values and calculate them into one final value".
A typical use case is summing up stuff, like counting how many fruit pieces there were in total. The uses are endless when you start to really get a grasp of it.
One gotcha is the initial value that you can pass a .reduce method. In our case we pass an empty bowl String, but it can basically be anything. A number, an Array, an Object, etc.
The initial value can be a bit strange at first, but in our fruit salad example you can try and think of it as the empty bowl itself. It is "connected" to the content variable, so whenever we do an operation, we're looking
into the bowl and adding more stuff to it's current content.
Until we don't have anything left, that is. Then .reduce stops and returns the final result.