javascript array flatten tutorial

stackoverflow.com › questions › 10865025 › merge-flatten-an-array-of-arrays

ES2019

ES2019 introduced the Array.prototype.flat() method which you could use to flatten the arrays. It is compatible with most environments, although it is only available in Node.js starting with version 11, and not at all in Internet Explorer.

const arrays = [
      ["12"],
      ["25"],
      ["22"],
      ["$10"]
    ];
const merge3 = arrays.flat(1); //The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.
console.log(merge3);

Older browsers

For older browsers, you can use Array.prototype.concat to merge arrays:

var arrays = [
  ["12"],
  ["25"],
  ["22"],
  ["$10"]
];
var merged = [].concat.apply([], arrays);

console.log(merged);

Using the apply method of concat will just take the second parameter as an array, so the last line is identical to this:

var merged = [].concat(["$6"], ["$12"], ["$25"], ["$25"], ["$18"], ["$22"], ["$10"]);

Answer from Gumbo on Stack Overflow

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 reads the length property of this and then accesses each property whose key is a nonnegative integer less than length. If the element is not an array, it's directly appended to the result. If the element is an array, it's flattened according to the depth parameter.

Medium

medium.com › swlh › how-to-flatten-an-array-in-javascript-6b3fef075655

How to Flatten an Array in JavaScript | by Devin Michael Gray | The Startup | Medium

December 16, 2020 - This is slightly more efficient than using shift and unshift, as those methods would force JavaScript to re-index the array after each iteration. // non recursive flatten deep using a stack // note that depth control is hard/inefficient as we will need to tag EACH value with its own depth // also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster function flatten(input) { const stack = [...input]; const res = []; while(stack.length) { // pop value from stack const next = stack.pop(); if(Array.isArray(next)) { // push back array items, won't modify the original input stack.push(...next); } else { res.push(next); } } // reverse to restore input order return res.reverse(); }const arr = [1, 2, [3, 4, [5, 6]]]; flatten(arr); // [1, 2, 3, 4, 5, 6]

Discussions

Learn how to flatten an array using the Reduce Method

arr.flat(); // Or... arr.flatMap(); Done. No need for reduce() or anything needlessly complicated. Just use the incredibly simple method already available to you instead of reinventing the wheel. More on reddit.com

r/learnjavascript

August 9, 2022

Flatten a nested array without using the inbuilt flat() method (interview learning)

const flatten = (arr) => { const items = []; for (const x of arr) { if (Array.isArray(x)) { items.push(...flatten(x)); } else { items.push(x); } } return items; }; console.log(flatten([0, [1, 2, [33, 44]], [4, 5, 6, 7], [7, 8], 90])); More on reddit.com

r/learnjavascript

January 8, 2026

How to flatten this nested array

const result = array.map((_, i) => ({ name: array[0][i].name, age: array[1][i].age, job: array[2][i].job })) More on reddit.com

r/learnjavascript

July 20, 2022

Day 46: Can You Flatten a Deeply Nested Array in JavaScript?

Angular is Google's open source framework for crafting high-quality front-end web applications. r/Angular2 exists to help spread news, discuss current developments and help solve problems. Welcome · Create your account and connect with a world of communities More on reddit.com

r/Angular2

June 14, 2025

Videos