AppDividend
Latest Code Tutorials

Pop Push Shift and Unshift Array Methods in JavaScript

0

Pop Push Shift and Unshift Array Methods in JavaScript is today’s leading topic. We will see pop, push, shift, and unshift method 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 the easy way to see the output inside the terminal. 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.

Now, if 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 as well.

Okay, after that, initialize a package.json file using 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() Method

The pop() method 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 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() method 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 in 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. Which means in our case, it is has started removing from 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

#Add 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 we can add the object into 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.