Javascript recursive array flattening

Question

I'm exercising and trying to write a recursive array flattening function. The code goes here:

function flatten() {
    var flat = [];
    for (var i = 0; i < arguments.length; i++) {
        if (arguments[i] instanceof Array) {
            flat.push(flatten(arguments[i]));
        }
        flat.push(arguments[i]);
    }
    return flat;
}

The problem is that if I pass there an array or nested arrays I get the "maximum call stack size exceeded" error. What am I doing wrong?

Just as a side-note: stackoverflow.com/questions/10865025/… — Etheryte, Commented May 5, 2015 at 8:59
flatten.apply(this, arguments[i]); but it's not the only issue. — basilikum, Commented May 5, 2015 at 9:05
Does this answer your question? Merge/flatten an array of arrays — Penny Liu, Commented Apr 19, 2020 at 13:25

Joe Lencioni · Accepted Answer · 2016-08-16 23:11:29Z

41

The problem is how you are passing the processing of array, if the value is an array then you are keep calling it causing an infinite loop

function flatten() {
    var flat = [];
    for (var i = 0; i < arguments.length; i++) {
        if (arguments[i] instanceof Array) {
            flat.push.apply(flat, flatten.apply(this, arguments[i]));
        } else {
            flat.push(arguments[i]);
        }
    }
    return flat;
}

Demo: Fiddle

Here's a more modern version:

function flatten(items) {
  const flat = [];

  items.forEach(item => {
    if (Array.isArray(item)) {
      flat.push(...flatten(item));
    } else {
      flat.push(item);
    }
  });

  return flat;
}

edited Aug 16, 2016 at 23:11

Joe Lencioni

10.5k18 gold badges57 silver badges68 bronze badges

answered May 5, 2015 at 9:07

Arun P Johny

389k68 gold badges531 silver badges532 bronze badges

Here is another modern one: function flatten(array, accu = []) { array.forEach(a => { if(Array.isArray(a)) flatten(a, accu) else accu.push(a) }) return accu }
– dotnetCarpenter
Commented Dec 13, 2016 at 23:32
Why don't the declarations of flat in the recursive calls of flatten() mask the outermost flat variable?
– mrwnt10
Commented Aug 26, 2018 at 16:09
1

@mrwnt10 I don't mean to sound sarcastic, but its because it is in fact, the outermost flat variable. The underlying flats in each successive frame are ultimately returned and then pushed into the top level flat where it is finally returned.
– Nicholas Gentile
Commented Oct 8, 2018 at 20:00
why are you using forEach() instead of for...of?
– Gy Tis
Commented Aug 17, 2022 at 5:10

Add a comment |

Gibolt · Accepted Answer · 2023-10-27 22:53:11Z

29

The clean way to flatten an Array in 2019 with ES6 is `flat()`

Short Answer:

array.flat(Infinity)

Detailed Answer:

const array = [1, 1, [2, 2], [[3, [4], 3], 2]]

// All layers
array.flat(Infinity) // [1, 1, 2, 2, 3, 4, 3, 2]

// Varying depths
array.flat() // [1, 1, 2, 2, Array(3), 2]

array.flat(2) // [1, 1, 2, 2, 3, Array(1), 3, 2]
array.flat().flat() // [1, 1, 2, 2, 3, Array(1), 3, 2]

array.flat(3) // [1, 1, 2, 2, 3, 4, 3, 2]
array.flat().flat().flat() // [1, 1, 2, 2, 3, 4, 3, 2]

Mozilla Docs

Can I Use - 96% Oct '23

edited Oct 27, 2023 at 22:53

answered Sep 26, 2019 at 22:20

Gibolt

47.5k15 gold badges206 silver badges133 bronze badges

Add a comment |

Franz Wong · Accepted Answer · 2018-03-18 05:34:29Z

8

If the item is array, we simply add all the remaining items to this array

function flatten(array, result) {
  if (array.length === 0) {
    return result
  }
  var head = array[0]
  var rest = array.slice(1)
  if (Array.isArray(head)) {
    return flatten(head.concat(rest), result)
  }
  result.push(head)
  return flatten(rest, result)
}

console.log(flatten([], []))
console.log(flatten([1], []))
console.log(flatten([1,2,3], []))
console.log(flatten([1,2,[3,4]], []))
console.log(flatten([1,2,[3,[4,5,6]]], []))
console.log(flatten([[1,2,3],[4,5,6]], []))
console.log(flatten([[1,2,3],[[4,5],6,7]], []))
console.log(flatten([[1,2,3],[[4,5],6,[7,8,9]]], []))

answered Mar 18, 2018 at 5:34

Franz Wong

1,1241 gold badge15 silver badges32 bronze badges

1

This should be the chosen answer. It does not use any iterative loops.
– jasonseminara
Commented May 26, 2018 at 2:44

Add a comment |

Adriaan · Accepted Answer · 2019-07-31 14:02:22Z

6

[...arr.toString().split(",")]

Use the toString() method of the Object. Use a spread operator (...) to make an array of string and split it by ",".

Example:

let arr =[["1","2"],[[[3]]]]; // output : ["1", "2", "3"]

edited Jul 31, 2019 at 14:02

Adriaan

18.2k7 gold badges44 silver badges86 bronze badges

answered Jul 31, 2019 at 13:50

shyam 74926

851 silver badge3 bronze badges

6

This will turn numbers into strings and will break apart strings that include commas.
– Scott Sauyet
Commented Jul 31, 2019 at 14:44

Add a comment |

Redu · Accepted Answer · 2021-05-15 20:14:11Z

A Haskellesque approach...

function flatArray([x,...xs]){
  return x !== undefined ? [...Array.isArray(x) ? flatArray(x) : [x],...flatArray(xs)]
                         : [];
}

var na = [[1,2],[3,[4,5]],[6,7,[[[8],9]]],10],
    fa = flatArray(na);
console.log(fa);

So i think the above code snippet could be made easier to understand with proper indenting;

function flatArray([x,...xs]){
  return x !== undefined ? [ ...Array.isArray(x) ? flatArray(x)
                                                 : [x]
                           , ...flatArray(xs)
                           ]
                         : [];
}

var na = [[1,2],[3,[4,5]],[6,7,[[[8],9]]],10],
    fa = flatArray(na);
console.log(fa);

Tim · Accepted Answer · 2018-03-15 22:30:28Z

4

If you assume your first argument is an array, you can make this pretty simple.

function flatten(a) {
    return a.reduce((flat, i) => {
      if (Array.isArray(i)) {
        return flat.concat(flatten(i));
      }
      return flat.concat(i);
    }, []);
  }

If you did want to flatten multiple arrays just concat them before passing.

answered Mar 15, 2018 at 22:30

Tim

4,6715 gold badges39 silver badges45 bronze badges

Add a comment |

ulou · Accepted Answer · 2018-12-05 16:35:19Z

If someone looking for flatten array of objects (e.g. tree) so here is a code:

function flatten(items) {
  const flat = [];

  items.forEach(item => {
    flat.push(item)
    if (Array.isArray(item.children) && item.children.length > 0) {
      flat.push(...flatten(item.children));
      delete item.children
    }
    delete item.children
  });

  return flat;
}

var test = [
	{children: [
      {children: [], title: '2'}
      ],
  title: '1'},
	{children: [
      {children: [], title: '4'},
      {children: [], title: '5'}
      ],
  title: '3'}
]

console.log(flatten(test))

Salman Arshad · Accepted Answer · 2015-05-05 09:35:25Z

Your code is missing an else statement and the recursive call is incorrect (you pass the same array over and over instead of passing its items).

Your function could be written like this:

function flatten() {
    // variable number of arguments, each argument could be:
    // - array
    //   array items are passed to flatten function as arguments and result is appended to flat array
    // - anything else
    //   pushed to the flat array as-is
    var flat = [],
        i;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] instanceof Array) {
            flat = flat.concat(flatten.apply(null, arguments[i]));
        } else {
            flat.push(arguments[i]);
        }
    }
    return flat;
}

// flatten([[[[0, 1, 2], [0, 1, 2]], [[0, 1, 2], [0, 1, 2]]], [[[0, 1, 2], [0, 1, 2]], [[0, 1, 2], [0, 1, 2]]]]);
//            [0, 1, 2,   0, 1, 2,     0, 1, 2,   0, 1, 2,       0, 1, 2,   0, 1, 2,     0, 1, 2,   0, 1, 2]

Why don't the declarations of flat in the recursive calls of flatten() mask the outer flat variable? — mrwnt10, Commented Aug 26, 2018 at 16:07
@mrwnt10 (if I understand your question correctly) var flat creates a local variable so it won't overwrite the outer flat variable. — Salman Arshad, Commented Aug 26, 2018 at 16:15

Ali Ben Messaoud · Accepted Answer · 2020-02-17 14:01:50Z

2

Modern but not crossbrowser

function flatten(arr) {
  return arr.flatMap(el => {
    if(Array.isArray(el)) {
        return flatten(el);
    } else {
      return el;
    }
  });
}

edited Feb 17, 2020 at 14:01

Ali Ben Messaoud

11.9k8 gold badges57 silver badges88 bronze badges

answered Sep 24, 2019 at 9:00

ada

6966 silver badges11 bronze badges

Add a comment |

aagamezl · Accepted Answer · 2015-07-08 04:43:11Z

This is a Vanilla JavaScript solution to this problem

var _items = {'keyOne': 'valueOne', 'keyTwo': 'valueTwo', 'keyThree': ['valueTree', {'keyFour': ['valueFour', 'valueFive']}]};

// another example
// _items = ['valueOne', 'valueTwo', {'keyThree': ['valueTree', {'keyFour': ['valueFour', 'valueFive']}]}];

// another example
/*_items = {"data": [{
    "rating": "0",
    "title": "The Killing Kind",
    "author": "John Connolly",
    "type": "Book",
    "asin": "0340771224",
    "tags": "",
    "review": "i still haven't had time to read this one..."
}, {
    "rating": "0",
    "title": "The Third Secret",
    "author": "Steve Berry",
    "type": "Book",
    "asin": "0340899263",
    "tags": "",
    "review": "need to find time to read this book"
}]};*/

function flatten() {
    var results = [],
        arrayFlatten;

    arrayFlatten = function arrayFlattenClosure(items) {
        var key;
        
        for (key in items) {
            if ('object' === typeof items[key]) {
                arrayFlatten(items[key]);
            } else {
                results.push(items[key]);
            }
        }
    };

    arrayFlatten(_items);
    
    return results;
}

console.log(flatten());

Evan Plaice · Accepted Answer · 2019-08-07 04:26:09Z

Here's a recursive reduce implementation taken from absurdum that mimics lodash's _.concat()

It can take any number of array or non-array arguments. The arrays can be any level of depth. The resulting output will be a single array of flattened values.

export const concat = (...arrays) => {
  return flatten(arrays, []);
}

function flatten(array, initial = []) {
  return array.reduce((acc, curr) => {
    if(Array.isArray(curr)) {
      acc = flatten(curr, acc);
    } else {
      acc.push(curr);
    }
    return acc;
  }, initial);
}

It can take any number of arrays or non-array values as input.

Source: I'm the author of absurdum

Daniele Serfilippi · Accepted Answer · 2019-11-11 15:01:38Z

1

Here you are my functional approach:

const deepFlatten = (array => (array, start = []) => array.reduce((acc, curr) => {
    return Array.isArray(curr) ? deepFlatten(curr, acc) : [...acc, curr];
}, start))();

console.log(deepFlatten([[1,2,[3, 4, [5, [6]]]],7]));

answered Nov 11, 2019 at 15:01

Daniele Serfilippi

1311 silver badge7 bronze badges

A late response, but I'm curious why you would choose the extra IIFE wrapper and your start parameter. Why not just const deepFlatten = (xs) => xs .reduce ((a, x) => [...a, ... (Array .isArray (x) ? deepFlatten (x) : [x])], []) ?
– Scott Sauyet
Commented Feb 17, 2020 at 16:09

Add a comment |

Noor Ahmed · Accepted Answer · 2020-03-19 10:21:16Z

A recursive approach to flatten an array in JavaScript is as follows.

function flatten(array) {
    let flatArray = [];
    for (let i = 0; i < array.length; i++) {
        if (Array.isArray(array[i])) {
            flatArray.push(...flatten(array[i]));
        } else {
            flatArray.push(array[i]);
        }
    }
    return flatArray;
}

let array = [[1, 2, 3], [[4, 5], 6, [7, 8, 9]]];
console.log(flatten(array));    
// Output = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

let array2 = [1, 2, [3, [4, 5, 6]]];
console.log(flatten(array2));    
// Output = [ 1, 2, 3, 4, 5, 6 ]

FilippoGallone · Accepted Answer · 2021-03-02 05:29:28Z

1

The function below flat the array and mantains the type of every item not changing them to a string. It is usefull if you need to flat arrays that not contains only numbers like items. It flat any kind of array with free of side effect.

function flatten(arr) {
  for (let i = 0; i < arr.length; i++) {
    arr = arr.reduce((a, b) => a.concat(b),[])
  }
  return arr
}

console.log(flatten([1, 2, [3, [[4]]]]));
console.log(flatten([[], {}, ['A', [[4]]]]));

edited Mar 2, 2021 at 5:29

answered Mar 2, 2021 at 3:32

FilippoGallone

113 bronze badges

Add a comment |

Deevoid · Accepted Answer · 2021-12-15 19:52:41Z

1

Solution using forEach

function flatten(arr) {
  const flat = [];
  arr.forEach((item) => {
    Array.isArray(item) ? flat.push(...flatten(item)) : flat.push(item);
  });
  return flat;  
}

Solution using reduce

function flatten(arr) {
  return arr.reduce((acc, curr) => {
    if (Array.isArray(curr)) {
      return [...acc, ...flatten(curr)];
    } else {
      return [...acc, curr];
    }
  }, []);
}

answered Dec 15, 2021 at 19:52

Deevoid

1111 silver badge6 bronze badges

Add a comment |

Anmol Tiwari · Accepted Answer · 2022-03-15 07:18:30Z

Another answer in the list of answers, flattening an array with recursion:

let arr = [1, 2, [3, 4, 5, [6, 7, [[8], 9, [10]], [11, 13]], 15], [16, [17]]];
let newArr = [];

function steamRollAnArray(list) {
  for (let i = 0; i < list.length; i++) {
    if (Array.isArray(list[i])) {
      steamRollAnArray(list[i]);
    } else {
      newArr.push(list[i]);
    }
  }
}

steamRollAnArray(arr);
console.log(newArr);

To simplify, check whether the element at an index is an array itself and if so, pass it to the same function. If its not an array, push it to the new array.

Hopesun · Accepted Answer · 2015-05-05 09:29:27Z

This should work

function flatten() {
    var flat = [
    ];
    for (var i = 0; i < arguments.length; i++) {
        flat = flat.concat(arguments[i]);
    }
    var removeIndex = [
    ];
    for (var i = flat.length - 1; i >= 0; i--) {
        if (flat[i] instanceof Array) {
            flat = flat.concat(flatten(flat[i]));
            removeIndex.push(i);
        }
    }
    for (var i = 0; i < removeIndex.length; i++) {
        flat.splice(removeIndex - i, 1);
    }
    return flat;
}

Peter Seliger · Accepted Answer · 2015-05-15 19:13:16Z

The other answers already did point to the source of the OP's code malfunction. Writing more descriptive code, the problem literally boils down to an "array-detection/-reduce/-concat-recursion" ...

(function (Array, Object) {


//"use strict";


  var
    array_prototype       = Array.prototype,

    array_prototype_slice = array_prototype.slice,
    expose_internal_class = Object.prototype.toString,


    isArguments = function (type) {
      return !!type && (/^\[object\s+Arguments\]$/).test(expose_internal_class.call(type));
    },
    isArray     = function (type) {
      return !!type && (/^\[object\s+Array\]$/).test(expose_internal_class.call(type));
    },

    array_from  = ((typeof Array.from == "function") && Array.from) || function (listAlike) {
      return array_prototype_slice.call(listAlike);
    },


    array_flatten = function flatten (list) {
      list = (isArguments(list) && array_from(list)) || list;

      if (isArray(list)) {
        list = list.reduce(function (collector, elm) {

          return collector.concat(flatten(elm));

        }, []);
      }
      return list;
    }
  ;


  array_prototype.flatten = function () {
    return array_flatten(this);
  };


}(Array, Object));

borrowing code from one of the other answers as proof of concept ...

console.log([
  [[[0, 1, 2], [0, 1, 2]], [[0, 1, 2], [0, 1, 2]]],
  [[[0, 1, 2], [0, 1, 2]], [[0, 1, 2], [0, 1, 2]]]
].flatten());
//[0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, ..., ..., ..., 0, 1, 2]

Swetha Lakshmi · Accepted Answer · 2020-12-22 03:04:36Z

I hope you got all kind of different. One with a combination of recursive and "for loop"/high-order function. I wanted to answer without for loop or high order function.

Check the first element of the array is an array again. If yes, do recursive till you reach the inner-most array. Then push it to the result. I hope I approached it in a pure recursive way.

function flatten(arr, result = []) {
  if(!arr.length) return result;
  (Array.isArray(arr[0])) ? flatten(arr[0], result): result.push(arr[0]);
  return flatten(arr.slice(1),result)
}

Dharman · Accepted Answer · 2021-02-06 20:17:03Z

0

I think the problem is the way you are using arguments.

since you said when you pass a nested array, it causes "maximum call stack size exceeded" Error.

because arguments[0] is a reference pointed to the first param you passed to the flatten function. for example:

   flatten([1,[2,[3]]]) // arguments[0] will always represents `[1,[2,[3]]]`

so, you code ends up calling flatten with the same param again and again.

to solve this problem, i think it's better to use named arguments, rather than using arguments, which essentially not a "real array".

edited Feb 6, 2021 at 20:17

Dharman♦

33.6k27 gold badges101 silver badges149 bronze badges

answered Feb 6, 2021 at 20:11

janko

414 bronze badges

Add a comment |

Hadi Abu · Accepted Answer · 2021-07-06 16:41:13Z

0

There are few ways to do this:

using the flat method and Infinity keyword:

const flattened = arr.flat(Infinity);
You can flatten any array using the methods reduce and concat like this:

function flatten(arr) { return arr.reduce((acc, cur) => acc.concat(Array.isArray(cur) ? flatten(cur) : cur), []); };

Read more at: https://www.techiedelight.com/recursively-flatten-nested-array-javascript/

answered Jul 6, 2021 at 16:41

Hadi Abu

1,3791 gold badge10 silver badges14 bronze badges

Add a comment |

noirsociety · Accepted Answer · 2021-09-17 15:48:46Z

const nums = [1,2,[3,4,[5]]];
const chars = ['a',['b','c',['d',['e','f']]]];
const mixed = ['a',[3,6],'c',[1,5,['b',[2,'e']]]];  

const flatten = (arr,res=[]) => res.concat(...arr.map((el) => (Array.isArray(el)) ? flatten(el) : el));

console.log(flatten(nums)); // [ 1, 2, 3, 4, 5 ]
console.log(flatten(chars)); // [ 'a', 'b', 'c', 'd', 'e', 'f' ]
console.log(flatten(mixed)); // [ 'a', 3, 6, 'c', 1, 5, 'b', 2, 'e' ]

Here is the breakdown:

loop over "arr" with "map"

arr.map((el) => ...)

on each iteration we'll use a ternary to check whether each "el" is an array or not

(Array.isArray(el))

if "el" is an array, then invoke "flatten" recursively and pass in "el" as its argument

flatten(el)

if "el" is not an array, then simply return "el"

: el

lastly, concatenate the outcome of the ternary with "res"

res.concat(...arr.map((el) => (Array.isArray(el)) ? flatten(el) : el));

--> the spread operator will copy all the element(s) instead of the array itself while concatenating with "res"

Akshay Sharma · Accepted Answer · 2021-12-08 13:18:39Z

0

var nestedArr = [1, 2, 3, [4, 5, [6, 7, [8, [9]]]], 10];
let finalArray = [];
const getFlattenArray = (array) => {

    array.forEach(element => {
        if (Array.isArray(element)) {
            getFlattenArray(element)
        } else {
            finalArray.push(element)
        }
    });

}

getFlattenArray(nestedArr);

In the finalArray you will get the flattened array

answered Dec 8, 2021 at 13:18

Akshay Sharma

2253 silver badges7 bronze badges

Please don't add duplicate answers to several existing questions.
– Scott Sauyet
Commented Dec 8, 2021 at 15:38

Add a comment |

John · Accepted Answer · 2022-06-25 23:55:10Z

I think you are very close. One of the problems are that you call the flatten function with the same arguments. We can make use of the spread operator (...) to make sure we are calling flatten on the array inside of arguments[i], and not repeating the same arguments.

We also need to make a few more adjustments so we're not pushing more items into our array than we should

function flatten() {
    var flat = [];
    for (var i = 0; i < arguments.length; i++) {
        if (arguments[i] instanceof Array) {
            flat.push(...flatten(...arguments[i]));
        } else {
            flat.push(arguments[i]);
        }
    }
    return flat;
}
console.log(flatten([1,2,3,[4,5,6,[7,8,9]]],[10,11,12]));

Mayank_VK · Accepted Answer · 2022-12-15 18:47:14Z

0

function flatArray(input) {
  if (input[0] === undefined) return [];
  if (Array.isArray(input[0]))
     return [...flatArray(input[0]), ...flatArray(input.slice(1))];
  return [input[0], ...flatArray(input.slice(1))];
}

answered Dec 15, 2022 at 18:47

Mayank_VK

171 silver badge5 bronze badges

Your answer could be improved by adding more information on what the code does and how it helps the OP.
– Tyler2P
Commented Dec 18, 2022 at 11:00

Add a comment |

Adesh Kumar · Accepted Answer · 2024-06-05 04:59:12Z

Here is my exampl

let arra = [1, [3,4], [5,6,4], 8]
let flatten2 = (oneArray) => {
var finalArray = [] 
for(var i=0;i<oneArray.length; i++){
if(Array.isArray(oneArray[i])){
finalArray.push(...oneArray[i])
} else{
finalArray.push(oneArray[i])
}
}
return finalArray
}
console.log(flatten2(arra))

e without recursion. Its simply using ES6

let flatten2 = (oneArray) => {
  var finalArray = [] 
  for(var i=0;i<oneArray.length; i++){
   if(Array.isArray(oneArray[i])){
     finalArray.push(...oneArray[i])
   } else {
  finalArray.push(oneArray[i])
}
}
return finalArray
 }
 console.log(flatten2(arra)

Kartik Dolas · Accepted Answer · 2025-02-23 09:19:01Z

0

I found this very short syntaxed and functional.

function flattenArray(arr) {
    return arr.reduce((acc, val) => 
        Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}

const nestedArray = [1, [2, [3, [4, 5]], 6], 7];
console.log(flattenArray(nestedArray)); // Output: [1, 2, 3, 4, 5, 6, 7]

answered Feb 23 at 9:19

Kartik Dolas

7611 gold badge12 silver badges27 bronze badges

Add a comment |

fade Ismaeel · Accepted Answer · 2015-05-05 09:00:27Z

-1

you should add stop condition for the recursion .

as an example if len (arguments[i]) ==0 return

answered May 5, 2015 at 9:00

fade Ismaeel

658 bronze badges

Why doesn't it just stop when i==arguments.length is true?
– yxfxmx
Commented May 5, 2015 at 9:03
so, what's the problem?(
– yxfxmx
Commented May 5, 2015 at 9:04

Add a comment |

Andrew · Accepted Answer · 2024-08-25 16:38:22Z

-1

Here is a solution without any iteration or helper variables:

function flatten(arr) {
  if (arr.length === 0) {
    return [];
  } else if (Array.isArray(arr[0])) {
    return flatten(arr[0]).concat(flatten(arr.slice(1)));
  } else {
    return [arr[0]].concat(flatten(arr.slice(1)));
  }
}

answered Aug 25, 2024 at 16:38

Andrew

11 bronze badge

Add a comment |

Collectives™ on Stack Overflow

Javascript recursive array flattening

29 Answers 29

The clean way to flatten an Array in 2019 with ES6 is `flat()`

Short Answer:

Detailed Answer:

Solution using forEach

Solution using reduce

Linked

Hot Network Questions

Collectives™ on Stack Overflow

29 Answers 29

The clean way to flatten an Array in 2019 with ES6 is flat()

Short Answer:

Detailed Answer:

Solution using forEach

Solution using reduce

Linked

Related

The clean way to flatten an Array in 2019 with ES6 is `flat()`