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

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 bines all.
  // elements.

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

    return array1d;
  }

  function reduce(array2d, bine) {

    let array1d = [];

    for (let element of array2d) {

      array1d = bine(array1d, element);

    }

    return array1d;
  }

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

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

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 bines all.
  // elements.

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

    return array1d;
  }

  function reduce(array2d, bine) {

    let array1d = [];

    for (let element of array2d) {

      array1d = bine(array1d, element);

    }

    return array1d;
  }

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

• javascript
• concatenation
• reduce

• The result should be [1, 2, 3, 4]? – Narigo Commented Jul 18, 2020 at 22:11
• Yes, definitely it should be [1, 2, 3, 4]. – 65535 Commented Jul 18, 2020 at 22:12
• Instead of array1d = bine(array1d, element); you could do array1d = array1d.concat(element); (making bine obsolete) – Narigo Commented Jul 18, 2020 at 22:14
• 1 Ah, maybe now I see the error: concat returns an array so you have to do array1d = array1d.concat(element). Try this. – Giovanni Esposito Commented Jul 18, 2020 at 22:29
• 1 concat doesn't mutate the array, it creates a new one – Narigo Commented Jul 18, 2020 at 22:30

5 Answers 5

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

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

function bine(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, bine));

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 bine in reduce to reducerFn to make it more clear that it could be changed to something else.

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

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

3. 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];
}, []);

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

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

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

let result = array2d.flat();

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

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

Ciao, here working example:

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

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

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
}