<p>In JavaScript, an array is a collection of ordered elements and there's no restriction for the type of elements.&nbsp;</p>
<blockquote>
<p>An array is said to be flat or flattened if there are no nested arrays inside the array.&nbsp;</p>
</blockquote>
<p>Let's see what an array and a flattened array look like with an example.</p>
<pre class="language-javascript"><code>// An array with nested arrays
const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

// Flattened array
["a", "b", "c", "d", "e", "f"]
</code></pre>
<p>In this article, we are going to see different ways to flatten arrays in JavaScript.&nbsp;</p>
<h2 style="text-align: center;">Flatten arrays in JS</h2>
<p>We'll see different ways to flatten this <code>letters</code> array in JS.&nbsp;</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];</code></pre>
<h3>1. Using concat() array method</h3>
<p><code>concat()</code> array method is used to merge two or more arrays. It takes a value or an array as an argument and concatenates it to the original array and returns the result as a new array without mutating the original one.</p>
<p>We'll use an empty array and concatenate the <code>letters</code> array elements with the help of a spread operator to spread the nested array elements.&nbsp;</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = [].concat(...letters);

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<h3>2. Using concat() array method with apply()</h3>
<p>We can use <code>apply()</code> method on <code>concat</code> function as apply method helps to pass arguments in the form of an array which we have already seen in <a href="https://devapt.com/call-apply-bind-javascript" target="_blank" rel="noopener">call, apply, bind Javascript</a> article.</p>
<p>So the idea is to pass every individual element of the array to the <code>concate</code> method instead of the whole array.</p>
<p>In the previous method, we have used the <code>...</code> spread operator for the same reason.&nbsp;</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = [].concat.apply([], letters);

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>The first array need not be empty and could be anything in <code>[].concat</code> because the array that we pass as the first argument to <code>apply()</code> will be considered for creating the new array.</p>
<h3>3. Using reduce() array method</h3>
<p>We can use <code>reduce()</code> method to flatten an array as flattening is a way of reducing the original array to a different form.</p>
<p>The idea is to spread every element and nested element in a new array and return the result, and the result is nothing but the flattened array.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = letters.reduce((acc, curr) =&gt; [...acc, ...curr], []);

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>We can omit the array given as a second argument to the <code>reduce</code> method, it is just to initialize the accumulator with an empty array.</p>
<h3>4. Using the flat() array method</h3>
<p>There's a new array method called <code>flat()</code> added in the <a href="https://262.ecma-international.org/10.0/" target="_blank" rel="noopener">ECMAScript version 2019</a> or ES10. What it does is simply flattens the array when it is called.</p>
<p>Using <code>flat()</code> method we can flatten arrays of any depth by passing the max. depth to be flattened to as an argument to the flat method. The default depth is 1.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = letters.flat(); // default depth 1

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>To flatten an array of depth greater than 1.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd', ['e', 'f']]];

const flatArray = letters.flat(2); // Flatten until depth 2

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>To flatten any amount of depth, we can pass <code>Infinity</code> as the argument to the <code>flat()</code> method.</p>
<h3>5. By converting to string and splitting</h3>
<p>Arrays of any depth when converted to a string gets flattened and will be joined by <code>,</code>(comma).</p>
<p>So using this technique after converting an array to a string and then splitting it by <code>,</code> we can flatten the array.</p>
<pre class="language-javascript"><code>const letters = ['a', 'b', ['c', 'd'], ['e', 'f']];

const flatArray = letters.toString().split(',');

// flatArray: ['a', 'b', 'c', 'd', 'e', 'f'];</code></pre>
<p>The main problem with this method is that it works well when all the elements in the array are strings or of any one specific type, say numbers. Because after generating the array we can convert it to a specific type.&nbsp;</p>
<p>But when the array consists of multiple type elements then it gets difficult to use this method.&nbsp;</p>
<p>Let's see how an array of numbers can be flattened using this technique.</p>
<pre class="language-javascript"><code>const numbers = [1, 2, [3, 4], [5, 6]];

const flatArray = numbers.toString().split(',').map(Number);
// or const flatArray = numbers.join().split(',').map(Number);
// or const flatArray = `${numbers}`.split(',').map(Number);

// flatArray: [1, 2, 3, 4, 5, 6]</code></pre>
<p>And that is all about different ways to flatten Javascript arrays. Most of the browsers have support for <code>flat()</code> method so it would be handy to use this method in most of the scenarios.</p>
<p>If you have any other way to flatten the arrays in a better manner then do share it with us and we'll be happy to update this article with that.&nbsp;</p>

There are different ways to flatten arrays in JavaScript. Here are the 5 different ways to obtain flat arrays using one liners in JS.

Posts tagged with Arrays

Learn to flatten array in JavaScript with one liners