Let's for the sake of reduce() pretend that you've always been listing your favorite things like the following. Of course, this might even be real...

    var
        favAuthors      = ['Frost', 'Dickinson', 'Hugo', 'Achebe', 'Wordsworth', 'Shelley'],
        favJazzists     = ['Grover Washington', 'Pamela Wilson', 'Peter White', 'John Coltrane', 'Herbie Hancock', 'Dave Brubeck'],
        favCities       = ['Boston', 'Calabar', 'Barcelona', 'Nice', 'Manchester', 'Toronto', 'Sydney', 'Istanbul'],
        favApps         = ['Notion', 'Code', 'Zoho Mail', 'Deezer', 'Signal', 'Todoist', 'Firefox'],
        favSongs        = ['Take Five', 'Paradise', 'My Favorite Things', 'Another Rainy Day', 'Take Ten', 'War']
    ;

Then one day, you think to yourself, hey, what if I could see like a "master list" of all my favorite things - O, oh, "My Favorite Things" by John Coltrane hits my mind. God, I love that song! How can I have that - the master list? Will I have to copy paste each list one-by-one into it? Is there a way I could just join or concatenate them all into one?

Of course, you can... with reduce().

In today's example of reduce(), I'll explain a helper function to reduce an array of arrays into a single array. For housekeeping, here's what reduce() is and here's how it works and, of course, here's why I've chosen to do a series on reduce().

flatten() array of arrays into one array

In MDN doc this is illustrated:

    var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
        function(accumulator, currentValue) {
            return accumulator.concat(currentValue);
        }, []
    );
    flattened // [0, 1, 2, 3, 4, 5]

What I noticed first is the [] empty array passed in as initial value, ini. Going by our discussion so far, you know already that doing so predicts your result - you want to return an array.

By the same token, acc will be the empty array [] at the start of the reduce() call and cur will be the contents of the first element/item in the array, that is [0, 1]. Then the concat() function is run, which merges two array into a new one. Then by the way reduce() works, it keeps up with the concat()enating until it runs out of cur, at which time it returns the final acc, the flattened single array.

Incidentally, you might wonder, O, yeah, why aren't we just using concat() then to merge these arrays? And, yes, we can.

To digress just a little, imagine you have:

    var
        arr1    = ['a', 'b', 'c'],
        arr2    = ['d', 'e', 'f'],
        arr3    = ['g', 'h', 'i'],
        arr4    = ['j', 'k', 'l'],

        // You can then concat() them into
        arrAll  = arr1.concat(arr2, arr3, arr4)
    ;

    arrAll // ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"]

So, obviously, concat() seems like an alternative solution for what we want, right? Right, you can write a custom concat() helper like coming below...

Just in case you're not familiar with the ... three dots, the rest parameter, do a quick look up on MDN rest parameter reference. It comes in handy since you don't have any idea how many arrays your concatenate() function might take.

    var concatenate = (arr, ...args) => arr.concat(...args)

    concatenate(arr1, arr2, arr3, arr4)

But for the sake of reduce() and this post, let's do it the reduce() way.

    // As old-school function
    function flatten(ini = [], ...arrs) {
        return [...arrs].reduce((acc, cur) => acc.concat(cur), ini)
    }

    // As one-liner modernish arrow function
    var flatten = (ini = [], ...arrs) => [...arrs].reduce((acc, cur) => acc.concat(cur), ini)

    // Test the flatten function
    var
        arr1    = ['a', 'b', 'c'],
        arr2    = ['d', 'e', 'f'],
        arr3    = ['g', 'h', 'i'],
        arr4    = ['j', 'k', 'l']
    ;

    // Now flatten those arrays
    flatten(arr1, arr2, arr3, arr4)

Hope it made sense? Notice I set the default value of ini to be [] empty array, which makes the acc start with that and concat() kicks in each time, filling acc up until done, and we got one big master list. See below how we would use it to produce a master list of all my favorite things.

    var
        favAuthors      = ['Frost', 'Dickinson', 'Hugo', 'Achebe', 'Wordsworth', 'Shelley'],
        favJazzists     = ['Grover Washington', 'Pamela Wilson', 'Peter White', 'John Coltrane', 'Herbie Hancock', 'Dave Brubeck'],
        favCities       = ['Boston', 'Calabar', 'Barcelona', 'Nice', 'Manchester', 'Toronto', 'Sydney', 'Istanbul'],
        favApps         = ['Notion', 'Code', 'Zoho Mail', 'Deezer', 'Signal', 'Todoist', 'Firefox'],
        favSongs        = ['Take Five', 'Paradise', 'My Favorite Things', 'Another Rainy Day', 'Take Ten', 'War']
    ;

    var flatten = (ini = [], ...arrs) => [...arrs].reduce((acc, cur) => acc.concat(cur), ini)

    flatten(favAuthors, favJazzists, favCities, favApps, favSongs) // This list is big!

Does any real world use case of this flatten() aka concatenate() helper pop into your mind? You want to share in the comments, let's see how if our function is doing its work no matter what? Cool, go ahead.