Push Pop Shift Unshift Array methods in Javascript
Published: 2022-11-19 07:37:52

Javascript have a rich set of inbuilt methods to perform a different type of operations with its String and Arrays. Today in this article, We will see the example of the few very common Array methods Push, Pop, Shift, Unshift. 

We will try to understand these Array methods with examples below. You can use the browser console to run these examples at your end.

## JavaScript Array push() Method
The array push() method adds the new items to the end of an array and returns a new length. The new item(s) will be added at the end of an array. 
If you want to add a new item at the very beginning of the Array, then unshift() is used for it.

Let's see the example below:

### Add a single item to an Array

```
let fruits = ['Mango','Banana','Apple'];
 
fruits.push('Orange');
console.log(fruits); // output will be["Mango", "Banana", "Apple", "Orange"]
 ```

### Add multiple items to an array

```
let fruits = ['Mango','Banana','Apple'];
 
fruits.push('Orange','Guava');
console.log(fruits); // output will be["Mango", "Banana", "Apple", "Orange","Guava"]
```

### Add Object to an Array of object

```
let countries = [
{ name:"England", language:"English" },
{ name:"Bangladesh", language:"Bangla" },
{ name:"Iran", language:"Urdu" }
];
 
countries.push({type: "India", language: "Hindi"});
console.log(countries);
// Below is the output
//(4) [
//0: {name: "England", language: "English"}
//1: {name: "Bangladesh", language: "Bangla"}
//2: {name: "Iran", language: "Urdu"}
//3: {type: "India", language: "Hindi"}
//]
```

### JavaScript Array pop() Method
This method removes the item of the very last position of the array and returns that item. This method changes the length of the array.

When pop() applies on an empty array, undefined is returned.

```
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // output is: "Mango"
```

```
let countries = [
{ name:"England", language:"English" },
{ name:"Bangladesh", language:"Bangla" },
{ name:"Iran", language:"Urdu" },
{ name:"India", language:"Hindi" }
];
 
let removedItem = countries.pop();
console.log(countries);
console.log("removed Item", removedItem);
// Below are the output...
// [{name: "England", language: "English"}1: {name: "Bangladesh", language: "Bangla"}2: {name: "Iran", language: "Urdu"}]
// removed Item {name: "India", language: "Hindi"}
```

### JavaScript Array unshift() Method
```
let countries = [
{ name:"England", language:"English" },
{ name:"Bangladesh", language:"Bangla" },
{ name:"Iran", language:"Urdu" }
];
 
countries.unshift({ name:"India", language:"Hindi" }); // if we console this line then new length will be printed.
console.log(countries);
// Below is the output
//[
//0: {name: "India", language: "Hindi"}
//1: {name: "England", language: "English"}
//2: {name: "Bangladesh", language: "Bangla"}
//3: {name: "Iran", language: "Urdu"}
//]
```

### JavaScript Array shift() Method
This method removes the first element of the Array. It also changes the length of the Array. 

 ```
let countries = [
{ name:"England", language:"English" },
{ name:"Bangladesh", language:"Bangla" },
{ name:"Iran", language:"Urdu" }
];
 
countries.shift(); // if we console this line then the removed item will be printed
console.log(countries);
// Below is the output
//(2) [
//0: {name: "Bangladesh", language: "Bangla"}
//1: {name: "Iran", language: "Urdu"}
//]
```
This article is originally posted over [jsonworld.com](https://jsonworld.com/blog/push-pop-shift-unshift-array-methods-in-javascript)