Javascript: Why array variable assignment is behaving differently inside and outside this function?

Question

For the life of me, I just can't figure out what I'm doing wrong here.

I'm trying to use both the reduce and concat array methods to take all of the values of a 2d array and combine them into a single value (basically condense them into a single array and then sum them up).

The problem that I keep running into is that when I try to make a for/loop to concat each array element, the argument that I'm passing into the function is not being recognized as an array, thus my call to .concat() is failing. I've placed a console.log() at the beginning of the function to see if the element is being recognized as the first array element in the 2d array, and it's coming up as "1"(?).

I tried another test outside of the function, and it logs as the actual array element. What am I doing wrong here? code below:

var arrays = [[1, 2, 3], [4, 5], [6]];

var myArray = arrays[0]; // Test
console.log(myArray); // Test

var flatArray = arrays.reduce(function(arrays)
{
    console.log(arrays[0]); // Test

    for (var i = 0; i < arrays.length - 1; i++)
    {
        arrays[0].concat(arrays[i+1]);
    }
    return arrays;

});

console.log(flatArray);

This is the output that I keep getting:

Array [ 1, 2, 3 ]
1
TypeError: arrays[0].concat is not a function

It's almost seems like array is being converted to a number-type when inside the function...?

Answer 1

You have an error in your code here:

var flatArray = arrays.reduce(function(param) {})

that param will be an element of your arrays vector.

Check this https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Answer 2

You are using .reduce() incorrectly and you don't even need to use it to flatten an array. You can just do this:

var flatArray = [].concat.apply([],arrays);

Working demo: http://jsfiddle.net/jfriend00/wfjyfp42/

---

To understand .reduce() , the callback you pass it gets four arguments (see MDN reference ). The first two arguments are important in using .reduce() correctly:

callback(previousValue, currentValue, index, array)

The previousValue is the accumulated value so far in the reduction. The currentValue is the next element of the array that is being iterated. The last two arguments do not need to be used if not needed.

Your code is only using the previousValue so it is never looking at the next item in the array as passed in by .reduce() .

You could make a solution work using .reduce() like this:

var flatArray = arrays.reduce(function(previousValue, currentValue) {
    return previousValue.concat(currentValue);
}, []);

Working demo: http://jsfiddle.net/jfriend00/2doohfc5/

Answer 3

Reduce performs an operation on two elements.

var sum = [[1, 2, 3], [4, 5], [6]].reduce(function(a, b) { 
    return a.concat(b);
}).reduce(function(a, b) { 
    return a + b;
});