Javascript: How to use the reduce function and the concat array function to transform an array of arrays into an array?

Question

In the following code, the array of arrays is not transformed and the browser console log logs an empty array.

Under the code below, what is the exact reason for the failure?

Any help would be greatly appreciated.

  // use reduce to transform an array of 
  // arrays to one array that combines all.
  // elements.

  function combine(array1d, element)
  {
    array1d.concat(element);

    return array1d;
  }

  function reduce(array2d, combine) {

    let array1d = [];

    for (let element of array2d) {

      array1d = combine(array1d, element);

    }

    return array1d;
  }

  let array2d =  [[1, 2,],[3, 4]];
  console.log(reduce(array2d, combine));

Instead of array1d = combine(array1d, element); you could do array1d = array1d.concat(element); (making combine obsolete) — Narigo
– Narigo, Commented Jul 18, 2020 at 22:14
Ah, maybe now I see the error: concat returns an array so you have to do array1d = array1d.concat(element). Try this. — Giovanni Esposito
– Giovanni Esposito, Commented Jul 18, 2020 at 22:29

Narigo · Accepted Answer · 2020-07-18 22:45:03Z

1

As you can see by all the answers, there are multiple ways to do this.

One solution which is fixing the error in the original question:

function combine(array1d, element) {
  return array1d.concat(element);
}

function reduce(array2d, reducerFn) {
  let array1d = [];

  for (let element of array2d) {
    array1d = reducerFn(array1d, element);
  }

  return array1d;
}

let array2d =  [[1, 2,],[3, 4]];
console.log(reduce(array2d, combine));

The difference here is the return array1d.concat(element); call instead of returning array1d and call .concat on it. concat is side-effect free, so it creates a new array instead of mutating the original one. I've also renamed combine in reduce to reducerFn to make it more clear that it could be changed to something else.

Using reduce directly on the array (supported by almost all browsers)

let result = array2d.reduce(function (flattenedArray, element) {
  return flattenedArray.concat(element);
}, []);

Using reduce and the spread operator instead of concat (no IE support - if you can drop it, you can also use Arrow functions):

let result = array2d.reduce(function (flattenedArray, element) {
  return [...flattenedArray, ...element];
}, []);

Using flatMap, the identity function can be used to flatten the array:

let result = array2d.flatMap(element => element);

Using flat, which flattens (deeply) nested arrays the amount of dimensions it receives as an argument:

let result = array2d.flat();

Using imperative style by creating a for loop for each dimension, fill the array in order - see answer by

flatMap and reduce, like concat, also return a new array, without mutating the original one. Since the original version looked more like trying to use a functional programming style to me, I guess these are a good addition to your toolbox. flatMap and flat are relatively recent additions to the language, so depending on the environments you need to support, you might end up using something else instead.

answered Jul 18, 2020 at 22:45

Narigo

3,1413 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Narigo Over a year ago

Not sure where the typo is...? The combine function is a parameter for reduce - it could be switched to something completely different, like summing up the numbers instead of concatenating.

Narigo Over a year ago

Think of having function combineMax(array1d, element) { return array1d.concat([Math.min(...element)]); }. You could use reduce(array2d, combineMin) and get the minimum values of each of the nested arrays. That's why I think the parameter does not have to be named combine but can be generalised to the reducerFn

Narigo Over a year ago

Yes, as soon as there is a parameter in a function, the outer variable / function / constant / whatever will be shadowed by that parameter. That means even if the parameter is called combine, reduce might call some completely different function, depending on how reduce is being called

focus1691 · Accepted Answer · 2020-07-18 22:13:38Z

1

You can transform the 2D array into an array first with flat, and then use the reduce function to add the elements.

If you don't need to add the elements, just remove the reduce.

var res = array2d.flat().reduce((prev, curr) => prev + curr);

answered Jul 18, 2020 at 22:13

focus1691

3515 silver badges17 bronze badges

Comments

Giovanni Esposito · Accepted Answer · 2020-07-18 22:14:03Z

1

Ciao, here working example:

let array2d =  [[1, 2,],[3, 4]];
let result = array2d.flat(1);
console.log(result);

answered Jul 18, 2020 at 22:14

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Comments

Dev Yego · Accepted Answer · 2020-07-18 22:16:03Z

1

const res = array2d.reduce((arr, seq) => {
  arr.push(...seq);
  return arr;
}, [])
console.log(res)

answered Jul 18, 2020 at 22:16

Dev Yego

5533 silver badges15 bronze badges

Comments

Specy · Accepted Answer · 2020-07-18 22:16:58Z

0

Why don't you do it the old fashioned way?

function mergeArray(array){
    let finalArray= []
    for(let i=0;i<iarray.lenght;i++){
          for(let j=0;j<array[i].lenght;j++){
                 finalArray.push(array[i][j])
          }
    }
    return finalArray
}

answered Jul 18, 2020 at 22:16

Specy

3413 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript: How to use the reduce function and the concat array function to transform an array of arrays into an array?

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest