AppDividend
Latest Code Tutorials

Pop Push Shift and Unshift Array Methods in JavaScript

0

In this example, we will see pop, push, shift, and unshift array methods one by one in Javascript Node.js with an example. JavaScript gives us four methods to add or remove items from the beginning or end of arrays.

Pop Push Shift and Unshift Array Methods in JavaScript

We will test all of our examples inside Node.js because it is easy to see the terminal’s output. Otherwise, we need to create an HTML file and include the JS file inside it and then check the browser console to see the output.

If you create a project folder and open that folder inside an editor, I am using VSCode and, if possible, start using that editor for JavaScript development.

Okay, after that, initialize a package.json file using the NPM command.

npm init -y

Now install the nodemon server by the following command.

npm install nodemon --save-dev

Create a new js file called server.js in a project folder.

Start the nodemon server by the following command.

nodemon server

JavaScript array pop() Function

The pop() method in JavaScript removes the last element of an array and returns that element. It will remove an item from the end of an array and return that item.

The javaScript pop() method can be called or applied to objects that resembling arrays. Objects which do not contain the length property reflecting a last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner. 

If you call a pop() function on the empty array, it returns as undefinedLet us see this action in the example.

// server.js

let stocks = [
  { type:"Apple", year:1975 },
  { type:"Microsoft", year:1976 },
  { type:"Amazon", year:1995 }
];

poppedStock = stocks.pop();
console.log(stocks);
console.log("Popped Item", poppedStock);

See the terminal for the output.

Pop Push Shift and Unshift Array Methods in JavaScript

So, here from the example, we can see that the last element is removed and returned.

Removing items from End of a JavaScript Array

We can remove the elements from the end of an array using the following code.

// app.js

let arr = [1, 2, 3, 4, 5, 6];
arr.length = 4;
console.log(arr);

In the above code, we have set the size of an array to four.

It means that an array starts from 0, which means after the 4th element, it will remove the other items, and we get the only first four items in the array.

See the following output.

➜  es git:(master) ✗ node app
[ 1, 2, 3, 4 ]
➜  es git:(master) ✗

Using Splice to Remove Array Elements in JavaScript

We can use the array splice() function to remove the elements from Javascript Array.

The splice method can be used to add or remove items from the array. The first argument specifies the location at which to begin to add or remove elements.

The second argument specifies the number of items to remove. The third and subsequent arguments are optional; they specify elements to be added to the array.

// app.js

let arr = [1, 2, 3, 4, 5, 6];
let removedArr = arr.splice(2,2);
console.log(removedArr);

See the following output.

➜  es git:(master) ✗ node app
[ 3, 4 ]
➜  es git:(master) ✗

So, it has removed two elements starting from index 2 and length of 2. This means, in our case, it is has started removing from the 3rd element up to the 4th element because the length is 2.

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. 

The push() method changes the length of an array. If we want to add the items at the beginning of an array, use the unshift() method. The only native, array-like objects are strings, although they are not suitable in applications of this method, as strings are immutable.

// server.js

let stocks = [
  { type:"Apple", year:1975 },
  { type:"Microsoft", year:1976 },
  { type:"Amazon", year:1995 }
];

stocks.push({
  type: "Tesla", year: "2003"
});
console.log(stocks);

JavaScript Array push() Method

Adding Multiple Items in an Array

See the following example of adding multiple items into the array.

// app.js

let arr = [1, 2, 3];
arr.push(4, 5, 6);
console.log(arr);

See the following output.

➜  es git:(master) ✗ node app
[ 1, 2, 3, 4, 5, 6 ]
➜  es git:(master) ✗

Javascript push object to array

How can we add the object to the array?? Well, let’s see the following code.

// app.js

let milliebobbybrown = {
  name: 'eleven',
  age: 11
}

let strangerThings = [{
  name: 'Dustin',
  age: 13
}, {
  name: 'Mike',
  age: 12
  }];

strangerThings.push(milliebobbybrown)
console.log(strangerThings)

See the following output.

➜  es git:(master) ✗ node app
[ { name: 'Dustin', age: 13 },
  { name: 'Mike', age: 12 },
  { name: 'eleven', age: 11 } ]
➜  es git:(master) ✗

JavaScript Array shift() Method

The shift() method removes the first item of an array. Javascript shift() method changes the length of the array. The return value of the shift method is the removed item.

// server.js

let stocks = [
  { type:"Apple", year:1975 },
  { type:"Microsoft", year:1976 },
  { type:"Amazon", year:1995 }
];

shiftedStock = stocks.shift();
console.log(stocks);
console.log("Shifted Item", shiftedStock);

JavaScript Array shift() Method

JavaScript Array unshift() Method

Javascript Array unshift() method adds the new item to the beginning of an array and returns the new length. Javascript unshift() method changes the length of an array because it adds new items to an array.

// server.js

let stocks = [
  { type:"Apple", year:1975 },
  { type:"Microsoft", year:1976 },
  { type:"Amazon", year:1995 }
];

let newStock = {
  type: "Tesla", year: 2003
};

unshiftedStock = stocks.unshift(newStock);
console.log(stocks);
console.log("Shifted Item", unshiftedStock);

JavaScript Array unshift() Method

Finally, Pop Push Shift and Unshift Array Methods in JavaScript tutorial example is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.