Introduction
Arrays are an often-used a part of any developer’s toolkit. They’re used to retailer a number of values in a single variable, which will be extraordinarily helpful. However what occurs when you will have an array… of arrays? This is called a multidimensional array, and it isn’t all the time the best factor to work with. That is the place flattening is available in.
On this Byte, we’ll discover what multidimensional arrays are, why you may need to flatten them, and the way you are able to do so utilizing the flat() methodology.
Multidimensional Arrays
A multidimensional array is actually an array that comprises different arrays. These inside arrays can themselves comprise arrays, resulting in a number of ranges of depth. This is a easy instance:
let multiArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
console.log(multiArray);
It will output:
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]
As you’ll be able to see, every inside array is its personal distinct entity inside the outer array.
Why flatten arrays?
So why would you ever need to flatten an array. In any case, is not the entire level of a multidimensional array to have a number of ranges of depth? Whereas that is true, there are nonetheless occasions when it may be helpful to flatten your arrays.
For instance you need to discover the sum of all of the numbers in our multiArray from the earlier part. In case you tried to make use of the scale back() methodology immediately on multiArray, you’d run into issues as a result of scale back() expects a one-dimensional array. By flattening the array first, you’ll be able to simply discover the sum of all of the numbers.
Utilizing the flat() Methodology
The flat() methodology is a built-in JavaScript methodology that can be utilized to flatten multidimensional arrays. By default, it should solely flatten one degree deep. This is how you need to use it:
let multiArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
let flatArray = multiArray.flat();
console.log(flatArray);
It will output:
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
As you’ll be able to see, flat() has taken our multidimensional array and turned it right into a one-dimensional array. Now we are able to extra simply discover the sum of all of the numbers utilizing scale back():
let sum = flatArray.scale back((a, b) => a + b, 0);
console.log(sum);
It will output:
45
There you will have it! We have efficiently flattened our multidimensional array utilizing the flat() methodology, making it a lot simpler to work with.
Utilizing the scale back() Methodology
JavaScript’s scale back() methodology is a strong device for condensing arrays. It applies a perform in opposition to an accumulator and every factor within the array (from left to proper) to scale back it to a single output worth.
Let’s have a look at how we are able to use the scale back() methodology to flatten an array of arrays:
let arrays = [[1, 2, 3], [4, 5], [6]];
let flattened = arrays.scale back((acc, curr) => acc.concat(curr), []);
console.log(flattened); // Output: [1, 2, 3, 4, 5, 6]
Within the scale back() methodology, acc (the accumulator) begins off as an empty array []. For every sub-array curr in arrays, we concatenate curr to acc and return the consequence. This continues till we have processed all of the sub-arrays, leading to a single, flattened array.
Utilizing the concat() Methodology
The concat() methodology is used to merge two or extra arrays. It doesn’t change the prevailing arrays, however as a substitute returns a brand new array.
Right here is how you need to use concat() to flatten an array of arrays:
let arrays = [[1, 2, 3], [4, 5], [6]];
let flattened = [].concat.apply([], arrays);
console.log(flattened); // Output: [1, 2, 3, 4, 5, 6]
Right here we’re utilizing apply() to name concat() with the arrays as arguments. This successfully concatenates all of the sub-arrays into one array. Understand that this solely works for 2-dimensional arrays, however not any bigger.
Flattening Nested Arrays
Flattening nested arrays, or arrays inside arrays, generally is a bit trickier. Nevertheless, the great factor in regards to the flat() methodology is that we are able to specify the depth of arrays to flatten.
let arrays = [[1, 2, [3]], [4, [5, [6]]]];
let flattened = arrays.flat(2);
console.log(flattened); // Output: [1, 2, 3, 4, 5, 6]
On this case, we’re telling flat() to flatten as much as 2 ranges of nested arrays. When you have an array with unknown depth, you’ll be able to go Infinity to flat() to flatten all nested arrays, irrespective of how deep.
Notice: The flat() methodology isn’t supported in Web Explorer. Think about using a polyfill or Babel plugin to offer this performance for older browsers.
Conclusion
On this Byte, we have explored just a few strategies to flatten arrays in JavaScript, together with scale back(), concat(), and flat(). Every methodology has its use circumstances and limitations, and understanding these can assist you select the correct device on your particular wants. Bear in mind, whereas flat() is a handy methodology, it could not all the time be your best option as a consequence of its lack of assist in older browsers.
