How To Flatten Arrays In Javascript – Simple Examples

Welcome to a quick tutorial on how to flatten arrays in Javascript. New to Javascript? Need to flatten a nested array? Or turn it into a flat string?

The common ways to flatten an array in Javascript are:

  1. var flatten = ARRAY.flat();
  2. var flatten = ARRAY.toString();
  3. var flatten = ARRAY.join("-");
  4. var flatten = ARRAYA.flatMap((ARRAYA, index) => [ARRAYA, ARRAYB[index]]);

That covers the quick basics, but let us walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Flatten Arrays Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

FLATTEN ARRAYS

All right, let us get into the various examples on how to flatten an array in Javascript.

 

1) FLAT FUNCTION

1-flatten-array.html
// (A) NESTED ARRAY
var arrA = [
  "First",
  ["Second", ["Third"]],
  "Forth"
];
console.log(arrA);

// (B) FLATTEN - DEFAULT 1 LEVEL DEEP
// FIRST, SECOND, *ARRAY*, FORTH
var arrB = arrA.flat();
console.log(arrB);

// (C) FLATTEN - 2 LEVELS DEEP
// FIRST, SECOND, THIRD, FORTH
var arrC = arrA.flat(2);
console.log(arrC);

The flat() function should be pretty much self-explanatory, it takes a nested array and reduces it down. Just take note of the minor annoyance, it only goes one level deep by default and will not flatten array-in-arrays. To solve that problem, we simply have to specify the number of levels to dig into – flat(LEVELS).

 

2) LOOP & FLATTEN AUTOMATICALLY

2-loop-flatten.html
// (A) NESTED ARRAY
var arr = [
  "First",
  ["Second", ["Third"]],
  "Forth"
];
console.log(arr);

// (B) LOOP + FLATTEN
var flatten = true;
while (flatten) {
  arr = arr.flat();
  flatten = false;
  for (let i of arr) {
    if (Array.isArray(i)) {
      flatten = true;
      break;
    }
  }
}
console.log(arr);

Just how do we “automatically flatten” a deep-nested array then? The not-so-clever way is to define an insanely deep depth – flat(999), but that will probably take a big hit with the performance. So the clever way is to just use a while loop to run through the array.

 

 

3) ARRAY TO STRING

3-array-to-string.html
// (A) NESTED ARRAY
var arr = [
  "First",
  ["Second", ["Third"]],
  "Forth"
];
console.log(arr);
 
// (B) ARRAY TO STRING
// FIRST,SECOND,THIRD,FORTH
var str = arr.toString();
console.log(str);

This is another “Captain Obvious”. Simply use toString() to turn the array into a flat string – All the array values will be concatenated together, separated with commas.

 

4) JOIN TO STRING

4-join-to-string.html
// (A) NESTED ARRAY
var arr = [
  "First",
  ["Second", ["Third"]],
  "Forth"
];
console.log(arr);

// (B) JOIN
// TAKE NOTE OF COMMA - JOIN HAS A FUNKY WAY OF DEALING WITH NESTED ARRAY
// FIRST-SECOND,THIRD-FORTH
var joinA = arr.join("-");
console.log(joinA);

// (C) FLATTEN BEFORE JOIN
// FIRST-SECOND-THIRD-FORTH
var joinB = arr.flat(2).join("-");
console.log(joinB);

The toString() function uses commas to concatenate an array. If you want to specify your own separators, use join(SEPARATOR) instead. Take note of the small hiccup here again – join() is kind of funky when it comes to deeply nested arrays, you might want to flatten first before joining.

 

 

5) FLAT MAP

5-flat-map.html
// (A) ARRAYS
var fruits = ["Apple", "Banana"];
var colors = ["Red", "Yellow"];

// (B) MAP ARRAYS - NOT WHAT WE WANT
// [[APPLE, RED], [BANANA, YELLOW]]
var mapA = fruits.map((fruits, index) => [fruits, colors[index]]);
console.log(mapA);

// (C) MAP AND FLATTEN
// [APPLE, RED, BANANA, YELLOW]
var mapB = fruits.flatMap((fruits, index) => [fruits, colors[index]]);
console.log(mapB);

I know, this is not quite “flatten”, but combining two arrays together… Just thought it will be good to know, use flatMap() instead of map() to get a single-level array.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

How To Flatten Arrays In Javascript (Click To Enlarge)

 

SUMMARY

Function Description Reference Link
ARRAY.flat(LEVELS) Flatten a multi-dimensional array. Click Here
ARRAY.flatMap() Map 2 arrays together, and flatten it. Click Here
ARRAY.toString() Combines an array into a string, separated with commas. Click Here
ARRAY.join(SEPARATOR) Combines an array into a string, with the specified separator. Click Here

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *