Pop Push Shift and Unshift Array Methods in JavaScript

JavaScript array pop

The pop() is a built-in JavaScript method that removes the last element of an array and returns that element. The pop() method does not take any argument and deletes the last item of the array. The method can be called or applied to objects that resemble 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 undefined. 

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.

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

How to remove elements from the end of an array

To remove elements from the end of an array in JavaScript, use the arr.length property. The array.length property returns an array up to a defined length, and the remaining elements will be eliminated. So, for example, we can remove the elements that start with length + 1 of the array.

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 only the first four items in the array.

Output

[ 1, 2, 3, 4 ] 

Using splice to remove array elements in JavaScript

The array splice() is a built-in JavaScript function that removes the elements from an Array. The splice() method can add or remove items from the array. The first argument specifies where to begin adding or removing elements.

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

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

console.log(removedArr);

Output

[ 3, 4 ] 

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

JavaScript array push

The array push() is a built-in JavaScript method that adds new elements 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.

To add the elements 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.

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

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

Output

Adding multiple elements in an array

To add multiple elements in the JavaScript array, use the array.push() method. Pass multiple arguments to the array.push() method and returns the modified array.

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

console.log(arr);

Output

[ 1, 2, 3, 4, 5, 6 ] 

Javascript push object to an array

To append an object to an array in JavaScript, use the array.push() method.

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

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

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

Output

[ { name: 'Dustin', age: 13 },
 { name: 'Mike', age: 12 },
 { name: 'eleven', age: 11 } ]

JavaScript array shift

The shift() is a built-in JavaScript method that removes the first item of an array. After that, the shift() method changes the array’s length. The return value of the shift method is the removed element.

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);

Output

JavaScript Array unshift

Javascript Array unshift() is a built-in method that adds the new element to the beginning of an array and returns the new length. The unshift() method changes the length of an array because it adds new elements to an array.

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);

Output

That’s it for this tutorial.