Understanding Nested Arrays in JavaScript
Tags: javascript, webdev, beginners
Published: 2021-01-05 04:46:36

An array is an __ordered collection of values__: each value is called an _element_, and each element has a numeric position in the array, known as its _index_.

JavaScript lets us create arrays inside array called __Nested Arrays__. Nested Arrays have one or many arrays as the element of an array. This might be little confusing in definition but it is very interesting once we dig inside.

![](https://miro.medium.com/max/1050/1*_oEuGR9xC2DFldsoK0Apbw.png)

##Creating a Nested Array:
There are three syntax to create an array in JavaScript. Let’s create nested arrays using those three methods to get an idea of Nested Arrays.
This one is just equating the variable to the array.
```javascript
var favMovies = ['Begin Again', 'Soul', ['Matrix', 'Matix Reloaded', 'Matrix Revolutions'],['Frozen', 'Frozen 2', ['Tangled', 'Alladin']]]
```
Second one is using the array method `new Array()`.

```javascript
var favMovies = new Array ( );

favMovies[0] = 'Begin Again'
favMovies[1] = 'Soul'
favMovies[2] = new Array ("Matrix", "Matix Reloaded", "Matrix Revolutions")
favMovies[3] = new Array ("Frozen", "Frozen 2", ["Tangled", "Alladin"])
```
And the last one is using the `Array()` which is similar to the `new Array()` .

```javascript

var favMovies = Array ( );

favMovies[0] = 'Begin Again'
favMovies[1] = 'Soul'
favMovies[2] = Array ("Matrix", "Matix Reloaded", "Matrix Revolutions")
favMovies[3] = Array ("Frozen", "Frozen 2", ["Tangled", "Alladin"])
```
Note that all these methods yield the same result. Now that we know how to create the nested arrays, let’s see how to access the elements of the Nested Arrays.

##Understanding how indices are assigned to the elements:
The arrays are listed according to the index. Below diagram explains how the indices are assigned to the elements in Nested Array.
![](https://miro.medium.com/max/1050/1*7Pt40pMidr5eYrOELJ64Ng.png)
Say we want to access the value ‘Tangled’, we can navigate to it using this table.
![](https://miro.medium.com/max/1050/1*aWBSd3H2CrZLKEmEIlVXZA.png)

```javascript
console.log(favMovies[3][2][0])
```
Similarly we can access any element with the help of index.

![](https://miro.medium.com/max/1500/1*L1k6F2LlsrHe3k7ipVgoOw.png)

##Flatten the nested Array:
There are ways to flatten the nested array. We can turn it into normal array by using the below methods.
###1) Using the method Array.flat()
`Array.flat()` method produces a new array by concatenating all sub arrays recursively up to the depth you specify.
Simply put, if you have an array of arrays (maybe more arrays within them), `flat()` will help you to join all entries together into a single array .
```javascript

favMovies = ['Begin Again', 'Soul', ['Matrix', 'Matix Reloaded', 'Matrix Revolutions'],['Frozen', 'Frozen 2', ['Tangled', 'Alladin']]]

flattenedArray = favMovies.flat() // depth is not specified
// expected result: ["Begin Again", "Soul", "Matrix", "Matix Reloaded", "Matrix Revolutions", "Frozen", "Frozen 2", Array(2)]

flatWithDepth = favMovies.flat(2) // depth of 2 is mentioned so we get complete flat array
// expected result: ["Begin Again", "Soul", "Matrix", "Matix Reloaded", "Matrix Revolutions", "Frozen", "Frozen 2", "Tangled", "Alladin"]
```
###2) Using Array.toString() and String.split() methods
We can convert the array to string and the split it using `.split()` method. That way we get the array.
```javascript

favMovies = ['Begin Again', 'Soul', ['Matrix', 'Matix Reloaded', 'Matrix Revolutions'],['Frozen', 'Frozen 2', ['Tangled', 'Alladin']]]
favMovies.toString().split(",") 
// expected result: ["Begin Again", "Soul", "Matrix", "Matix Reloaded", "Matrix Revolutions", "Frozen", "Frozen 2", "Tangled", "Alladin"]
```

Thank you!