Array Flatten in JavaScript.
Simplified nested arrays into a single level structure.
What nested arrays are.
A nested array means an array within an array. This isn't limited to just one, an array can contain multiple arrays within an array. In fact, this happens when you have a lot of data, or when a particular object contains multiple entities.
You can think of it as a group, an array, and another array within that, and more arrays within that. Another easy way to understand this is a box within a box.
This is an important concept because a lot of real-world data is nested, so naturally, it's often stored in nested arrays. It's also important to know how to perform operations on nested arrays to extract or work with the data.
So now, let's go step by step and understand each section of nested arrays.
so below is a simple code on Nested array you can see it and understand it what i meant by nested array
const array = [1,[2,3], 4,[5,6]];
console.log(array);
What flattening arrays is useful.
So, the answer to why array flattening is important is quite simple. Let's understand it.
First, flattening means converting a nested array into a simple one dimensional array. Now, let's see why we need to do this.
Array flattening becomes important when we have deeply nested data with many values inside multiple arrays. Now, assume you want to access and print every value. How would you do that? You would need to apply a loop on each array. Or you would first access an index, and then again apply a loop on that index because it contains another array. So, this becomes complex and difficult to manage.
This is the main problem accessing data from nested arrays can be tricky and messy. The solution is to flatten the array. That means converting all the deeply nested arrays into a single array, and then accessing the values becomes much easier.
Now the next question is: how do we flatten an array? There are many methods available in JavaScript to do this.
There is also a built-in array method (a prototype method) that makes this task much easier, so you don’t have to write a lot of logic. Let's explore that in the next section.
Concept of flattening arrays.
In this section, you have a nested array, no matter how deep it is, and the goal is to convert it into a single dimension, meaning a simple, plain array.
There are several ways to do this in JavaScript. For example, you can use the forEach method, the reduce method, or a simple for loop with a loop. In all of these methods, you must implement logic, first check whether an element is a nested array, and then store each value in a new array with the desired final result.
In JavaScript, no matter how deep a nested array is, we have a prototype method that comes with the array method to flatten it. This method is called flat().
I'll show you a straightforward code example of how we can use this method to save time. With just one call, it can convert a deeply nested array into a simple flat array. You can also do this using other methods, but essentially, they follow the same principle, so using flat() makes our work easier and faster.
Below is a code example, take a look. After that, we'll look at the other different methods available for flattening arrays.
const nest = [1, [2, 3], [[4]]];
console.log(nest.flat(2));
- So, this is the basic concept of array flattening.
Different approaches to flattening arrays.
As I mentioned earlier, we have many methods to flatten an array. We have already seen one common method, but we usually use that when we know how deeply nested the array is, meaning we know how many levels of arrays are inside.
- However, in large systems, we often deal with heavy data, and we may not know how deeply nested the array is. To solve this problem, we have different approaches to extract the values. Let's look at them one by one.
First Approach :-
- The first approach is using a for loop with recursion. Recursion means a function calls itself until a base condition is met. The loop checks each index, and if the element is an array, it extracts its values one by one.
Second Approach :-
- The second method is using the forEach array prototype method, also with recursion. The approach is similar, check each element, and if it is an array, apply the loop again and extract the values.
Third Approach :-
- The third method is using reduce with recursion. Here, we have a current value and a previous value, and based on that, we can determine if the current element is an array and then extract its values accordingly.
Apart from these, there are also many libraries and other different approaches available to flatten arrays.
Common interview scenarios.
So, let's discuss what can be asked in interviews.
Interviewers ask questions on array flattening because, in both frontend and backend development, most of the work is related to data. That data can often be nested. So, they may give you a scenario like, If this nested data is given, and I only need a specific value from it, how will you extract it?, basically focusing on accessing a particular value.
Another common question could be, if you have a deeply nested array and you don't know how deep it is, how will you flatten it without using the flat() method? Here, the interviewer is trying to test whether you understand recursion or not, and whether you know how the flat() method works internally like checking each element and performing operations step by step.
So, these are some common interview questions. There can be more, but now you have a basic idea.
