how to flatten a nested array javascript

How to flatten nested array in javascript? [duplicate]

stackoverflow.com › questions › 27266550 › how-to-flatten-nested-array-in-javascript

Perfect use case for recursion, which could handle even deeper structure:

function flatten(ary) {
    var ret = [];
    for(var i = 0; i < ary.length; i++) {
        if(Array.isArray(ary[i])) {
            ret = ret.concat(flatten(ary[i]));
        } else {
            ret.push(ary[i]);
        }
    }
    return ret;
}

flatten([[[[[0]], [1]], [[[2], [3]]], [[4], [5]]]]) // [0, 1, 2, 3, 4, 5]

Alternatively, as an Array method:

Array.prototype.flatten = function() {
    var ret = [];
    for(var i = 0; i < this.length; i++) {
        if(Array.isArray(this[i])) {
            ret = ret.concat(this[i].flatten());
        } else {
            ret.push(this[i]);
        }
    }
    return ret;
};

[[[[[0]], [1]], [[[2], [3]]], [[4], [5]]]].flatten() // [0, 1, 2, 3, 4, 5]

EDIT #1: Well, think it a little bit functional way (except for the named recursion which should be using Y-combinator for pure functional :D).

function flatten(ary) {
  return ary.reduce(function(a, b) {
    if (Array.isArray(b)) {
      return a.concat(flatten(b))
    }
    return a.concat(b)
  }, [])
}

Let's adopt some ES6 syntax which makes it even shorter, in one line.

const flatten = (ary) => ary.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [])

But remember, this one cannot be applied as an array method, because arrow functions don't have theirs own this.

EDIT #2: With the latest Array.prototype.flat proposal this is super easy. The array method accepts an optional parameter depth, which specifies how deep a nested array structure should be flattened (default to 1).

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

So to flatten an array of arbitrary depth, just call flat method with Infinity.

[[[[[0]], [1]], [[[2], [3]]], [[4], [5]]]].flat(Infinity) // [0, 1, 2, 3, 4, 5]

Answer from Leo on Stack Overflow

Stack Overflow

stackoverflow.com › questions › 27266550 › how-to-flatten-nested-array-in-javascript

How to flatten nested array in javascript? - Stack Overflow

Top answer

1 of 16

Perfect use case for recursion, which could handle even deeper structure:

function flatten(ary) {
    var ret = [];
    for(var i = 0; i < ary.length; i++) {
        if(Array.isArray(ary[i])) {
            ret = ret.concat(flatten(ary[i]));
        } else {
            ret.push(ary[i]);
        }
    }
    return ret;
}

flatten([[[[[0]], [1]], [[[2], [3]]], [[4], [5]]]]) // [0, 1, 2, 3, 4, 5]

Alternatively, as an Array method:

Array.prototype.flatten = function() {
    var ret = [];
    for(var i = 0; i < this.length; i++) {
        if(Array.isArray(this[i])) {
            ret = ret.concat(this[i].flatten());
        } else {
            ret.push(this[i]);
        }
    }
    return ret;
};

[[[[[0]], [1]], [[[2], [3]]], [[4], [5]]]].flatten() // [0, 1, 2, 3, 4, 5]

EDIT #1: Well, think it a little bit functional way (except for the named recursion which should be using Y-combinator for pure functional :D).

function flatten(ary) {
  return ary.reduce(function(a, b) {
    if (Array.isArray(b)) {
      return a.concat(flatten(b))
    }
    return a.concat(b)
  }, [])
}

Let's adopt some ES6 syntax which makes it even shorter, in one line.

const flatten = (ary) => ary.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [])

But remember, this one cannot be applied as an array method, because arrow functions don't have theirs own this.

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

So to flatten an array of arbitrary depth, just call flat method with Infinity.

[[[[[0]], [1]], [[[2], [3]]], [[4], [5]]]].flat(Infinity) // [0, 1, 2, 3, 4, 5]

2 of 16

~~ES6-style with recursion:~~

Redacted

June 2018 Update:

There is now an ES proposal for an Array.prototype.flat method. It is currently at stage 3, meaning it's likely to be implemented by browsers soon(ish) and make it into the spec in its current form. There are probably some polyfills floating around.

Example:

const nested = [[[0], [1]], [[2], [3]], [[4], [5]]];
const flattened = nested.flat(2);  // Need to specify depth if > 1

June 2019 Update:

Array.prototype.flat was officially added to the language in the ES2019 spec.

MDN Web Docs

developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Array › flat

Array.prototype.flat() - JavaScript - MDN Web Docs

The flat() method removes empty slots if the array being flattened is sparse. For example, if depth is 1, both empty slots in the root array and in the first level of nested arrays are ignored, but empty slots in further nested arrays are preserved with the arrays themselves.

Discussions

Best Ways to Deep Flatten Arrays in JavaScript?

What's wrong with just arr.flat(Infinity)? More on reddit.com

r/learnjavascript

January 2, 2025

Flatten a nested array

Hey guys, I have a question regarding one of the challenges in the JavaScript course. I should flatten a nested array without using .flat(). I knew that I would need to use some kind of recursive function but in the end I could not come up with something that would be working properly. More on forum.freecodecamp.org

forum.freecodecamp.org

July 12, 2021

How to make a flatten list function recursive? I made it iterative...

It doesn't actually work. Do you know about doctest? You can put this at the end of your file to run the code in your docstring: import doctest doctest.testmod() You'll see that it has a problem with the deeply nested list. Basically it's only flattening one level down, because you're not using recursion. The fix is simple though. When you find an element which is a list, you need to recursively flatten that element before you concatenate it to the list you're going to return. I.e. lst1 = lst[0:i] + lst[i] needs to be lst1 = lst[0:i] + flatten(lst[i]) Oh, but actually this still doesn't work. It turns [[1, [1, 1]], 1, [1, 1]] to [[1, [1, 1]], 1, 1, 1]---seems it somehow failed to flatten the first list element. Actually, what is happening is that you are concatenating to lst (the original, un-flattened list) rather than lst1 (the new list you're building). You could make yourself less likely to make that kind of error by giving your variables more helpful names, like, say, "old_list" for lst and "new_list" for lst1. You'd have probably noticed the problem if what you had written was new_list = old_list[0:i] + old_list[i] EDIT: Actually there is still a problem even after you make both these fixes :) It gives you a flat list but not the right flat list. I'll leave that for you to solve. Hint: when you flatten a list, its length might increase. More on reddit.com

r/learnpython

September 23, 2022

How to flatten a deep nested Array in JS

While this method works, it's... not that great. It uses a ton of memory creating new arrays with recursive concat calls. You can do it in place and iteratively on a single array, which should be much faster and less costly:

var nested = [3, [1, 'hey', [2, 'you', [2, 5]]], 1, [9, [{}, [2, true]]]];

var flat = [].concat(nested);

for(var i = 0; i < flat.length; i++) {
    if(Array.isArray(flat[i])) {
        flat.splice(i, 1, ...flat[i--]);  
    }
}

console.log(flat);

Videos