Push Pop Shift Unshift Array methods in Javascript

Pankaj Kumar - Nov 19 '22 - - Dev Community

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"}
//]
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode
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"}
Enter fullscreen mode Exit fullscreen mode

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"}
//]
Enter fullscreen mode Exit fullscreen mode

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"}
//]
Enter fullscreen mode Exit fullscreen mode

This article is originally posted over jsonworld.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .