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...?

@jfriend00 "condense them into a single array". `[1,2,3,4,5,6]`, I assume. — Teepeemm, Jun 05 '15 at 16:12
Simple way to flatten arrays here: http://stackoverflow.com/a/10865042/816620 and http://geniuscarrier.com/flat-nested-array-in-javascript/ and http://www.christopherbiscardi.com/2014/01/06/flattening-nested-arrays-in-javascript/. This is a widely discussed topic if you simply search for "flatten arrays javascript". `var flat_arr = [].concat.apply([],arrays);` — jfriend00, Jun 05 '15 at 16:17
@jfriend I'm trying to "flatten" this 2d array by combining the the two array methods "concat" and "reduce". The output should be the sum of all of the number elements in the array. Each of the 3 array elements should be combined into one and then summed up into a single value. I can't get that far because arrays[0] is logging differently when logged inside and outside the function outside the function, it logs correctly ([1, 2, 3]). Inside the function is different though (1). — Ramon Carroll, Jun 05 '15 at 16:17
Your use of `.reduce()` is entirely flawed and there are much, much simpler ways to flatten nested arrays (see my previous comment) so it's not really worth dissecting what you're doing wrong with `.reduce()` since it isn't the best way to solve this problem anyway). — jfriend00, Jun 05 '15 at 16:20
you are using `reduce()` incorrectly as @jfriend00 said . Why do you even want to use reduce? I can be done easily without it. — ankur, Jun 05 '15 at 16:25

score 2 · Answer 1 · answered Jun 05 '15 at 16:14

2

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

answered Jun 05 '15 at 16:14

c-smile

24,546
7
54
79

jfriend00 · Accepted Answer · 2015-06-05T16:35:11.670

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/

Thank you for the detailed explanation. It really helps. I've also looked at the other links you referenced. Not sure how I missed them, but they also help, so thank you for pointing me in the right direction. — Ramon Carroll, Jun 05 '15 at 16:38

score 1 · Answer 3 · answered Jun 05 '15 at 16:15

1

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;
});

answered Jun 05 '15 at 16:15

yate

784
4
7

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

3 Answers3