Application-oriented understanding of Arrays
Tags: javascript, beginners, webdev, codenewbie
Published: 2020-07-11 11:40:37

The array is a data structure that is used to store a large collection of data. Why do we need data structures?

For storing a single data entry we can use one _variable_ like

```
var friend = "Manish";
```

Suppose we want to store four friends we might need four variables

```
var friend1 = "John";
var friend2 = "Raj";
var friend3 = "Harry";
var friend4 = "Zach";
```

But in large applications like Facebook, where there are a billion users who have billions of friends, posting trillion of texts, posting and commenting. It is difficult to store data using variables. 

To deal with huge datasets we use data-structures. The array is mostly used.

###Creating an Array

Use the below syntax to create an array
```
var shoppingList = [];  //Empty Array
var country = ["India","USA","Brazil"]; 
//The array contains similar data and of one type that is string
var clothes = [0, "shirt", 420, true, 1, "jeans", 500, false];  
//The array can also contain data of many types.
```

###Retrieve data from an array

The friends' example discussed above can be turned as below
```
var friends = ["John", "Raj", "Harry", "Zach"];
```

The name of the friends is stored in the `friends` array. We can retrieve the name of the friend `Harry` below syntax is used.

```
console.log(friends[2]); // Output --> Harry
```

In `friends[2]` 2 is the index and in an array, the index starts from 0 indexes up to `length of Array - 1`.

###Mostly Used Built-in Array Methods

* Push    -  This method is used to add a new element to the _end_ of the array. It updates the array with the new element and returns the new length of the array.

```
var arrPush = [1,2,3];
arrPush.push("Hello there!"); 
// returns 4, that is, length of array and arrPush is updated as [1,2,3,"Hello there!"]
```

* Pop    -   This method is used to remove the element from the _end_ of the existing array. It updates the array with removing the element an returns the element removed.
````
var arrPop = [1,"air",3,"water"];
arrPop.pop(); 
// returns "water", that is, element removed and arrPop is updated as [1,"air",3]
```

* Shift    -  This method works like pop the difference is it removes the element from the _beginning_ of the array.

* Unshift  -  This method works like push the difference is it adds an element to the _beginning_ of the array.

* Slice    -  The slice method is used to convert the selected elements into a new array object.

```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var newFruits = fruits.slice(1,3);  
//    ["Orange", "Apple"]  
//First parameter denotes start selecting of the element 
//Second parameter tells to which element we want
console.log(fruits);  
// Outputs  --> ["Banana", "Orange", "Apple", "Mango"]
```

* Splice   -  Splice is a dynamic method that helps in adding/remove items to/from the array.

```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits);
//["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
//first parameter  -  index from which elements needs to be add/removed.
//second parameter -  This is optional. tells how many elements needs to be removed.
//other parameter  -  These are the items that needs to be pushed into the array.
```