How to flatten nested array in javascript?

Question

As we know, to flatten the array [[0, 1], [2, 3], [4, 5]] by using the method reduce()

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
});

So how to flatten this array [[[0], [1]], [[2], [3]], [[4], [5]]] to [0, 1, 2, 3, 4, 5]?

Answer 1

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 2

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.

Answer 3

This is an alternative to recursion (see jsfiddle here) and should accept any level of depth which avoids stack overflow.

var array = [[0, 1], [2, 3], [4, 5, [6, 7, [8, [9, 10]]]]];
console.log(flatten(array), array); // does not mutate array
console.log(flatten(array, true), array); // array is now empty

// This is done in a linear time O(n) without recursion
// memory complexity is O(1) or O(n) if mutable param is set to false
function flatten(array, mutable) {
    var toString = Object.prototype.toString;
    var arrayTypeStr = '[object Array]';
    
    var result = [];
    var nodes = (mutable && array) || array.slice();
    var node;

    if (!array.length) {
        return result;
    }

    node = nodes.pop();
    
    do {
        if (toString.call(node) === arrayTypeStr) {
            nodes.push.apply(nodes, node);
        } else {
            result.push(node);
        }
    } while (nodes.length && (node = nodes.pop()) !== undefined);

    result.reverse(); // we reverse result to restore the original order
    return result;
}

Answer 4

ES2019 solution:

ary.flat(Infinity);

That's it. It's that simple. You can change Infinity to be the appropriate level of flattenedness if you wish.

Example:

console.log([[[0], [1]], [[2], [3]], [[4], [5]]].flat(Infinity));

Other, longer solutions that work with older browsers below.

---

Based on @Leo's solution, but faster by reusing the same array and preventing .concat

function flatten(ary, ret = []) {
    for (const entry of ary) {
        if (Array.isArray(entry) {
            flatten(entry, ret);
        } else {
            ret.push(entry);
        }
    }
    return ret;
}
console.log(flatten([[[0], [1]], [[2], [3]], [[4], [5]]]));

Or with Array.prototype.reduce, since you mentioned it:

function flatten(ary, ret = []) {
    return ary.reduce((ret, entry) => {
        if (Array.isArray(entry)) {
            flatten(entry, ret);
        } else {
            ret.push(entry);
        }
        return ret;
    }, ret);
}
console.log(flatten([[[0], [1]], [[2], [3]], [[4], [5]]]));

Answer 5

ES6 one-liner:

function flatten(a) {
    return Array.isArray(a) ? [].concat(...a.map(flatten)) : a;
}

Also, non-recursive version for very deep arrays (not very efficient but rather elegant)

function flatten(a) {
    var queue = a.slice();
    var result = [];
    while(queue.length) {
        let curr = queue.pop();
        if(Array.isArray(curr)) {
            queue.push(...curr);
        }
        else result.push(curr);
    }
    return result;
}

Answer 6

Flattens 2 levels only:

var arr = [1, [2, 3], [4, 5, 6]];
[].concat.apply([], arr) // -> [1, 2, 3, 4, 5, 6]

Answer 7

This is already answered but I am just studying JS and wonder what about:

    var array = [[[0], [1]], [[2], [3]], [[4], [5]]];
    var flattend = array.join(",").split(",");
    console.log(flattend);

Only side affect is that the join converts all items to strings, but that can be easilly fixed

Answer 8

I like my solution :)

var flattenClosure = function(a) {
    var store = [];

    return function() {
        var internMapper = function(b) {
            if (Array.isArray(b)) {
                return b.map(internMapper);
            }
            store.push(b);
            return b;
        }
        a.map(internMapper);
        return store;
    }
};

console.log(flattenClosure([[[[[[[[1]]]], [2], [4], [6, 8, 9], 2]]], 10, 11, [15, 17, 20], [], 33])());

Answer 9

If you're aware the array is made up of only numbers you can just do the following:

array.join().split(',').map(Number);

Answer 10

Inspired by code from Eloquent JavaScript and the answer provided by @axelduch (A lot more efficient from what I can tell too.)

function flatten(array, mutable) {
  var nodes = (mutable && array) || array.slice(); // return a new array.
  var flattened = [];

  for (var node = nodes.shift(); node !== undefined; node = nodes.shift()) {
    if (Array.isArray(node)) {
      nodes.unshift.apply(nodes, node);
    } else {
      flattened.push(node);
    }
  }

  return flattened;
}

Answer 11

Disclaimer: I know that it is an old and already answered question, but @Nick has got me into it as I have commented his answer as one of the most expensive way to flatten an array. I haven't been coding JavaScript for years, but it's like riding a bike - once you learn you'll never forget ;)

Here is my full recursive code (no for loop needed):

var flattened = [];
function flatten(a, i) {
    if(a.length > i) {
        if(Array.isArray(a[i]))
            flatten(a[i], 0);
        else
            flattened.push(a[i]);
        flatten(a, i + 1);
    }
}

flatten([[0, 1], [2, 3], [4, 5]], 0);
console.log(flattened);

I have tested it against toString().split(',') solution and mine is about 7 times faster. That's what I mean when talking about expensiveness ;)

Answer 12

function flatten(array) {
    return array.reduce(
        (previous, current) =>
            Array.isArray(current)
            ? [...previous, ...flatten(current)]
            : [...previous, current]
        , []
    );
}

Answer 13

var nested = [[[0], [1]], [[2], [3]], [[4], [5]]];
var flattened = [].concat.apply([],[].concat.apply([],nested));
console.log('-> flattened now: ' + flattened);

Answer 14

Based on dashamble's answer, but I believe this is a bit simpler to understand:

var steamroller = function(arr) {
  var result = [];

  var dropHeavyObject = function(auxArr) {
    var flatnd = [];

    flatnd = auxArr.map(function(x) {
      if(Array.isArray(x)) {
        return dropHeavyObject(x);
      } else {
        result.push(x);
        return x;
      }
    });

    return flatnd;
  };

  dropHeavyObject(arr);
  return result;
}

Answer 15

There are three utility functions in lodash related to your question flatten, flattenDeep, flattenDepth in lodash. flatten goes into a single depth, flattenDeep goes all the way into the deepest level and flattenDepth gives you the choice of "how deep" to flatten.

Example:

> var arr = [[[0], [1]], [[2], [3]], [[4], [5]]];
> _.flattenDeep(arr)
   [0, 1, 2, 3, 4, 5]

Answer 16

var flattenWithStack = function(arr) {
  var stack = [];
  var flat = [];
  stack.push(arr);
  while(stack.length > 0) {
    var curr = stack.pop();
    if(curr instanceof Array) {
      stack = stack.concat(curr);
    } else {
      flat.push(curr);
    }
  }
  return flat.reverse();
}

Non recursive. Basically dfs.

Answer 17

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

recursively flattens the array.

Answer 18

I was having this issue the other day and discovered a little hack... actually I just realized it's very similar to the last answer and like comment to the above answer indicates, it won't work for objects, but for simple numbers etc. it works just fine.

If you take a nested array to string, it separates the values by commas. Then you can split it by commas to form a string. If you then need to convert the strings to int or float, you can run through the new array converting each value.

stringArray = [[0, 1], [2, 3], [4, 5]].toString().split(',');
stringArray.forEach((v,i,a) => a[i] = parseFloat(a[i]));

Answer 19

An implementation with functional programming

With functional programming we can simply derive flatten from another more generic function: traverse.

The latter is a function to traverse and reduce arbitrarily nested arrays just like flat arrays. This is possible because nested arrays with unknown depth are no more than a particular version of a tree data structure:

const traverse = f => g => acc => xs => {
  let [leaf, stack] = xs[0][0] === undefined
   ? [xs[0], xs.slice(1)]
   : f([]) (xs);

  return stack.length
   ? traverse(f) (g) (g(leaf) (acc)) (stack)
   : g(leaf) (acc);
};

const dfs = stack => tree => tree[0] === undefined 
 ? [tree, stack]
 : dfs(tree.length > 1 ? concat(stack) (tree.slice(1)) : stack) (tree[0]);

const concat = ys => xs => xs.concat(ys);
const flatten = f => traverse(f) (concat) ([]);

const xs = [[[1,2,3],4,5,6],7,8,[9,10,[11,12],[[13]],14],15];

console.log(flatten(dfs) (xs));

Please note that tree data structures can either be traversed by depth first (DFS) or by breadth first (BFS). Arrays are usually traversed in depth first order.

As I said traverse is a generic reduction function like reduce for flat arrays. So we can easily calculate the sum of all elements as well:

const add = y => x => x + y;
traverse(dfs) (add) (0) (xs); // 120

Conclusion: To flatten an arbitrarily nested array in a functional way we just need a one-liner: const flatten = f => traverse(f) (concat) ([]);. All other involved functions are generic and have a whole range of other potential applications. This is 100% reusability!

Answer 20

Using JSON.stringify and JSON.parse

arr = JSON.parse("[" + 
               JSON.stringify(arr)
                   .replace(/[\[\]]+/g,"")
                   .replace(/,,/g,",") +
               "]");

Answer 21

Using Lisp conventions.

Using .shift() and .concat() is inefficient, however.

    flatten (array) {

        // get first element (car) and shift array (cdr) 
        var car = array.shift();

        // check to see if array was empty
        if (car === undefined) {
            return [];

        // if the first element (car) was an array, recurse on it
        } else if (_.isArray(car)) {
            return flatten(car).concat(flatten(array));

        // otherwise, cons (concatenate) the car to the flattened version of cdr (rest of array)
        } else {
            return [car].concat(flatten(array))
        }
    }

Answer 22

// implementation
function flattenArray(){
  const input = arguments[0]
      , output = flatten(input)

  function flatten(){
    return [].concat.apply([], arguments[0])
  }

  return input.length === output.length
    ? output
    : flattenArray(output)
}

// how to use?
flattenArray([1,2,[3]) // return [1,2,3]

Test Cases -> https://github.com/CHAOWEICHIU/ccw-custom-functions/blob/master/test/units/flattenArray.js

Answer 23

function flatten(arrayOfArrays) {
  return arrayOfArrays.reduce(function(flat, subElem) {
    return flat.concat(Array.isArray(subElem) ? flatten(subElem) : subElem);
  }, []);
}


var arr0 = [0, 1, 2, 3, 4];
var arr1 = [[0,1], 2, [3, 4]];
var arr2 = [[[0, 1], 2], 3, 4];
console.log(flatten(arr0));  // [0, 1, 2, 3, 4]
console.log(flatten(arr1));  // [0, 1, 2, 3, 4]
console.log(flatten(arr2));  // [0, 1, 2, 3, 4]
console.log(flatten([]));    // []

Answer 24

If you have an infinitely nested array like a below, here's what I'd do.

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

Array.prototype.flatten = (array) => {
  const newArray = []
  const flattenHelper = (array) => {
    array.map(i => {
      Array.isArray(i) ? flattenHelper(i) : newArray.push(i)
    })
  }
  flattenHelper(a)
  return newArray
}

const newArray = a.flatten()
console.log(newArray);

Answer 25

Heres what I've got:

function steamrollArray(arr) {
  // the flattened array
  var newArr = [];

  // recursive function
  function flatten(arr, newArr) {
    // go through array
    for (var i = 0; i < arr.length; i++) {
      // if element i of the current array is a non-array value push it
      if (Array.isArray(arr[i]) === false) {
        newArr.push(arr[i]);
      }
      // else the element is an array, so unwrap it
      else {
        flatten(arr[i], newArr);
      }
    }
  }

  flatten(arr, newArr);

  return newArr;
}

Answer 26

Can be solved like this

const array = [[0, 1], [2, 3], [4, 5, [6, 7, [8, [9, 10]]]]];

const flatten(arr) => arr.reduce((acc, item) => 
   acc.concat(Array.isArray(item) ? flatten(item) : item);
}, []);

console.log(flatten(array));

Be aware that in case of the deep arrays, the TCO should be applied

The version with the TCO with the recursion solution

const array = [[0, 1], [2, 3], [4, 5, [6, 7, [8, [9, 10]]]]];

const flatten = (() => {
  const _flatten = (acc, arr) => arr.reduce((acc, item) =>  acc.concat(Array.isArray(item) ? _flatten([], item) : item), acc);

  return arr => _flatten([], arr);
})();

console.log(flatten(array))

Answer 27

Think this function works.

 function flatten(arr){
     return arr.reduce(function(a,b){
        return [].concat(Array.isArray(a)? flatten(a) :a,Array.isArray(b)? flatten(b):b);
      });

}