Over the past few years, many useful features have been added to the Javascript Array global object that give developers a variety of options when writing code that can be used with arrays. These features offer many advantages, most notably that while in the past developers had to implement their own complex logic to perform various array operations, these new features no longer require such a home-made implementation. One of the useful features this article will explore is the flat() function.

Functions overview

The flat() function provides the ability to concatenate an array of items into an entirely new array and return the new array when the function is done. Since this function generates a brand new array, any existing, completely separate arrays contained in the original array will not be changed once the function is done, and no precautions need to be taken before the operation begins.

The flat() function takes only one argument, which is optional. The only argument is the depth argument. If the original array contains one or more nested array structures, this parameter determines how many array layers the function flattens into a single layer. Since this parameter is optional, it defaults to 1, and only the single-layer array will be flattened into the brand new array returned when the function completes.

No parameters

After covering the general function behavior, let’s look at some examples of how the Flat () function works in practice. The following example illustrates the case where no parameter value is specified:

var array1 = [1.2[3.4], [[5.6]], [[[7.8]]], [[[[9.10]]]]];
var array2 = array1.flat();
// array2: [1, 2, 3, 4, [5, 6], [[7, 8]], [[[9, 10]]]]
Copy the code

The flat() function is called without argument values. This function call is the same as flat(1), considering the default values of the optional arguments. This means that any array with a depth of 1 in the original array will be completely flattened so that all its contents can be separately concatenated to the new array. The depth of any array with a depth of 2 or greater in the original array will be reduced by 1, and any single array item with a depth of 1 in those arrays will be separately concatenated to the new array. As a result, the first array containing 3 and 4 in the original array is flattened so that the two items are separately concatenated to the new array. In addition, each of the remaining three nested arrays is concatenated into the new array, reducing the nesting depth by one.

Is the depth of the

The following example demonstrates the value of the positive depth parameter:

var array1 = [1.2[3.4], [[5.6]], [[[7.8]]], [[[[9.10]]]]];
var array2 = array1.flat(2);
// array2: [1, 2, 3, 4, 5, 6, [7, 8], [[9, 10]]]
Copy the code

Call the flat() function with the depth parameter value 2. This means that any array with a depth of up to 2 in the original array will be completely flattened so that all its contents can be separately concatenated to the new array. Any array with a depth of 3 or greater in the original array will have its depth reduced by 2, and any single array item with a depth of 1 or 2 in those arrays will be separately concatenated to the new array. As a result, the first two arrays in the original array containing 3 and 4 and 5 and 6 are flattened, concatenating the four items to the new array, respectively. In addition, the remaining two nested arrays are both connected to the new array, reducing their nesting depth by 2.

Infinite depth

The following example demonstrates specifying the value of the infinite depth parameter:

var array1 = [1.2[3.4], [[5.6]], [[[7.8]]], [[[[9.10]]]]];
var array2 = array1.flat(Infinity);
// array2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Copy the code

Call the flat() function with the depth value Infinity. This means that all arrays of any depth in the original array will be flattened so that all their contents can be separately concatenated to the new array. One very important thing to keep in mind when using values such as Infinity with the flat() function is that if an application encounters arrays nested deep enough, it may run out of memory. Although Infinity is used here to demonstrate that you can use this value with the Flat () function, smaller, finite parameter values are recommended to avoid any unforeseen errors in the application.

The depth of the zero

The following example demonstrates a depth value of 0:

var array1 = [1.2[3.4], [[5.6]], [[[7.8]]], [[[[9.10]]]]];
var array2 = array1.flat(0);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]
Copy the code

Call the flat() function with the depth parameter value 0. This means that any array contained in the original array will not be flattened, and the composition of the new array’s individual entries and nested arrays is exactly the same as the original array.

The depth of the negative

The following example demonstrates specifying a negative depth parameter value:

var array1 = [1.2[3.4], [[5.6]], [[[7.8]]], [[[[9.10]]]]];
var array2 = array1.flat(-Infinity);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]
Copy the code

Call the flat() function with the depth parameter value -infinity. Since a negative depth value does not make sense for a flat nested array, 0 is used instead in cases where a negative depth parameter value is specified. As the previous example demonstrates, when you specify a depth parameter value of 0, no array in the original array is flat, and the composition of the items and nested arrays in the new array is exactly the same as in the original array.

Lessons learned

There are some lessons to be learned from this article about the flat() function. The first thing to remember is that the Flat () function does not change any ordinary or nested arrays in the original array in any way, so there is no need to maintain the state of those arrays before using the function. The only array that the flat() function changes is the brand new array that the function returns when it’s done, which is simply built with all the contents of the original array.

The second thing to remember is that the flat() function removes any null values that exist in the original array. The following example demonstrates this feature in action:

var array1 = [1.3.5];
var array2 = array1.flat();
// array2: [1, 3, 5]
Copy the code

Even though the original array occupies five positions and the values for the second and fourth positions are undefined, the flat() function removes these two items from the new array returned after the function completes. As a result, the new array contains only three items whose values are not undefined.

The third and final thing to remember about the Flat () function is its general use, and how it helps simplify logic. If there is no single function available, to merge all the items contained in any array, the usual way is to write custom logic to iterate over all the arrays, Pulling items individually from one array and then dropping them into another may take into account nested arrays. Such logic is often messy and error-prone, so it’s a good idea to avoid it by using abstract built-in functions such as flat().

Source: Levelup.gitConnected.com, by Keith Dawson, Translated: Front-end Full Stack Developer