Concatenating arrays in Javascript

Question

I am pretty new to javascript and I have an issue with flattening several arrays into one complete array using the reduce and concat function.

var array = [ [1, 3], [6, 6], [3, 3] ]; 

var finishedArray = function(array) {
var reducedArray = {};
var completeArray = {};


for (var i = 0; i < array.length; i++) {
    reducedArray[i] = array[i].reduce(function (a, b) {
        return a + b;
    });

    completeArray = reducedArray[i].concat(reducedArray[i + 1]);
}

return completeArray;

}

console.log(finishedArray(array));`

The error I get is : completeArray = reducedArray[i].concat(reducedArray[i + 1]);

TypeError: undefined is not a function

Why is that???

Answer 1

the easy way:

var finishedArray = [ [1, 3], [6, 6], [3, 3] ].reduce(Function.apply.bind([].concat), [])

another nice option than can be more readable is using a named function, which lets you apply this transform to many arrays in many places without so much ugly boilerplate every time:

function flat(a,b){return a.concat(b);}

[[1,3],[6,6],[3,3]].reduce(flat);
[[7,3],[4,6],[8,1]].reduce(flat);

it's the shortest path to flatten many different arrays.

note you can also write the reusable in the same fast-but-ugly syntax as my first suggestion:

 var flat=Function.apply.bind([].concat);

also note that elclanrs shows an even simpler method that i really like:

 [].concat.apply([],[[1,3],[6,6],[3,3]]) 

Answer 2

@Dandavis has provided a perfectly good answer showing how to 'flatten' an jagged array—to turn an array of arrays into a single array containing all the elements of the original arrays. I'll try to explain why you're getting the error you are and hopefully improve your understanding of these methods.

First off, note that you declared reducedArray and completeArray as empty objects ({}). the syntax for creating an empty array is:

var reducedArray = [];
var completeArray = [];

Once you fix that though, you will still have problems. In this statement:

reducedArray[i] = array[i].reduce(function (a, b) {
    return a + b;
});

The reduce method will turn an input array (in this case array[i]) into a single value, by summing each consecutive item and returning the final result. Notice what this returns:

var array = [ [1, 3], [6, 6], [3, 3] ]; 
for (var i = 0; i < array.length; i++) {
    reducedArray[i] = array[i].reduce(function (a, b) {
        return a + b;
    });
}
console.log(reducedArray); // [4, 12, 6]

This means that reducedArray[i] is actually a number, not an array, and there is no concat method on the Number type. Because concat is undefined, you cannot call it like a function.

Answer 3

We can also do this using Arrow function like:

var array = [ [1, 3], [6, 6], [3, 3] ];
var finishedArray = array.reduce((e, f) => e.concat(f), []);

 

---

Demo:

var array = [ [1, 3], [6, 6], [3, 3] ];
var finishedArray = array.reduce((e, f) => e.concat(f), []);

// Output
console.log( finishedArray );

This will give output like:

[1, 3, 6, 6, 3, 3]

 

---

If you need unique values in this finishedArray variable you can also do:

var uniqueArray = [...new Set(finishedArray)];

Demo:

var array = [ [1, 3], [6, 6], [3, 3] ];
var finishedArray = array.reduce((e, f) => e.concat(f), []);
var uniqueArray = [...new Set(finishedArray)];

// Output
console.log( uniqueArray );

This output for this is like:

[1, 3, 6]

Answer 4

There is an easier and shorter solution.

var array = [ [1, 3], [6, 6], [3, 3] ];
vat finishedArray = [].concat(...array);

Output: [1, 3, 6, 6, 3, 3].