JavaScript Array.reduce() explained with LEGO bricks

We all must agree that JavaScript is great! But you know what? LEGO is even greater! Why? Because you can explain and model so many ideas and behaviors and algorithms using this amazing toy ?.

Definition

The Mozilla Developers Network defines the reduce method in Array object prototype like this:

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

Your reducer function’s returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.

All right, but when and how I can use this function? Is it only for summing all the numbers in an array? Is there a real-world example? And what do this Accumulator (acc), Current Value (cur), Current Index (idx) and Source Array (src) stand for?

?? Let’s dive into the kid’s room for a nice explanation.

The colorful blocks

Let’s be honest, I’m a totally incorrigible LEGO addict ?. Ah, those colors, shapes, and possibilities to build anything you can imagine out of them…

Now, as I don’t have so much time to spend on them, I prefer to have all the sets built up and displayed on a shelf as they should look like according to the model. But, from time-to-time (especially when the kids get their hands over my precious collection) all of my sets get mixed up and thrown in a big container altogether. Oh, what a mess… And then comes the time for me to gather all my supplies, strength and motivation to bring them back onto their shelves.

But wait, what about reducers? Okay, so before I can restore my displayed collection, I need to build them, and to do that, I need to know which piece belongs to which set. Then I would be able to construct the sets with their instructions (as if I don’t know the instructions by heart ?).

And here comes the time for my brain to use a perfect array reducer!

Let’s reduce the bricks

Okay, so for the ease of the example, let’s assume that there are no shared blocks among the different sets. So I know, that if I see a black 2x2 block, I know that it belongs to my Star Wars B-Wing Fighter and all my red windows belong to an old family house set. Let’s assume I have only 3 LEGO sets: a B-Wing, a Harry Potter forbidden corridor room and a simple old house with white walls and red roof.

So, here is my container of all the bricks messed up together.

const bricks = [    {set: 'b-wing', type: 'brick', size: '2x2', color: 'black'},    {set: 'house', type: 'roof', size: '4x2', color: 'red'},    {set: 'hp', type: 'spider', size: '1x1', color: 'black'},    {set: 'b-wing', type: 'panel', size: '4x8', color: 'gray'},    {set: 'b-wing', type: 'brick', size: '2x2', color: 'black'},    {set: 'house', type: 'brick', size: '6x1', color: 'white'}]

I want to arrange them into boxes with LEGO sets like this:

{'b-wing': [], 'house': [], 'hp': []}

??? I haven't prepared the labeled boxes, so I will do it along the way, as soon as I stumble upon a piece that doesn’t have a box yet.

So, what I am going to do, is to loop through all the bricks and put each of them into the corresponding box. Here are some statements from the process:

1. Initially, I have no boxes prepared for each set, but I know that I am going to put the boxes on a special shelf.
2. I take out a new brick from the initial container, process it in mind, decide where it belongs to, and put the current brick into its set box.
3. If there is no box for the set of my current piece, I create and label a new box and put it on the shelf.
4. Each time I take a brick from theinitial container, I reduce the number of all bricks left to arrange.
5. Finally, when there is no brick left in the initial container to process, I look at my shelf and see that my mixed pile of LEGO bricks got transformed into a structured arrangement of labeled boxes on my shelf.

So, in other words (or in visual), I will transform the pile on the left into the organized structure on the right: