Add Items to Arrays with .unshift() & .push() Methods
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-07-23 15:31:26

This *episode* is all about *"Adding Elements to an Existing Array"*

Arrays are *mutable* which means, items can be *added* or *removed* over time. As we know from the first episode of this series, in JavaScript, array length is not fixed and it can auto-grow. We have also seen that we can add an element to the end of an array using `square bracket []` notation. 

In this episode, we can look into two *methods*, 𝐀𝐫𝐫𝐚𝐲.𝐮𝐧𝐬𝐡𝐢𝐟𝐭() & 𝐀𝐫𝐫𝐚𝐲.𝐩𝐮𝐬𝐡(), to know how to *add* elements *to the beginning* and *at the end* of an *existing array*.

Both methods can take *more than one* elements as *parameters* and add those elements to the array when they are being called on. 

###Array.unshift() Method

`Array.unshift()` method adds elements to the `beginning` of an existing array. The following is an example of adding elements using this method:

```js
let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output 3

fruits.unshift("Mango","Apple","Orange");
console.log(fruits);

//output: [ 'Mango', 'Apple', 'Orange', 'Watermelon', 'Grapes', 'Guava' ]

console.log(fruits.length); //output: 6
```
We can observe from the *output* that, *3 new values* are added to the *beginning* of the *fruits* array. That means, the `.unshift()` method took *3 parameters* and added them in the *beginning* of the array. 
At the beginning, the array had the *length of 3*. Now it has a *length of 6*.

Similarly, we can add another array or an Object or both inside the existing array using this method. Here we will add another array for this example:

```js
let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output: 3

let newFruits = ["Mango","Apple","Orange"];
fruits.unshift(newFruits);
console.log(fruits);

//output: [ 
[ 'Mango', 'Apple', 'Orange' ], 
'Watermelon', 'Grapes', 'Guava'
]

console.log(fruits.length); //output: 4
```
The above example shows, the *output* holds an new *array* added to the *beginning* of the *fruits* array. That means, the `.unshift()` method took the *newFruits* variable as it's *parameter* and added the array stored in it.
Now the *fruit* array has a *length* of 4 as the new array occupied only the *first* index of the *fruit* array.


###Array.push() Method

`Array.push()` method adds elements to the `end` of an existing array. The following is an example of adding elements using this method:

```js
let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output 3

fruits.push("Strawberry","Blueberry","Pineapple");
console.log(fruits);

/* output: [ 'Watermelon','Grapes','Guava',
           'Strawberry',Blueberry','Pineapple' ] */

console.log(fruits.length); //output: 6
```
The *output* of this example shows, *3 new values* are added to the *end* of the *fruits* array. That means, the `.push()` method took *3 parameters* and added them to the *end* of the array. The array *length* is also increased from *3 to 6*. 

Just like the `.unshift()` method, `.push()` can also add an array or an Object or both to the end of the existing array. Here, we will add an Object to the end of the array for example:

```js
let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output 3

let newfruits = {"S" : "Strawberry", "B": "Blueberry", "P" : "Pineapple"};

fruits.push(newfruits);
console.log(fruits);

/*output: [
  'Watermelon',
  'Grapes',
  'Guava',
  { S: 'Strawberry', B: 'Blueberry', P: 'Pineapple' }
] */

console.log(fruits.length); //output: 4
```
The *output* holds an new *Object* added to the *end* of the *fruits* array. That means, the `.push()` method took the *newFruits* variable as it's *parameter* and added the Object stored in it.
The *fruit* array now has a *length of 4* as the Object has occupied only the *last* index of the *fruit* array.

Well, we can also use *both methods* in one code snippet to add elements both to the *start* and the *end* of the array.
For Example:

```js
let fruits = ["Watermelon","Grapes","Guava"];
console.log(fruits.length); //output 3

fruits.unshift("Mango", "Apple", "Orange");
fruits.push("Strawberry", "Blueberry", "Pineapple");

console.log(fruits);
console.log(fruits.length); //output: 9

/*output: [
            "Mango", "Apple", "Orange",
            "Watermelon","Grapes","Guava",
            "Strawberry", "Blueberry", "Pineapple"
          ]
*/       
``` 
In this example, *both* of the methods are used and finally we got an array which has a *length of 9* as the *output*.

######In this episode, we learnt about adding elements to an existing array. The next episode will be all about removing items from an array.