The array pop method allows us to remove the last element from an Javascript array. It will return the element it removes to the caller. This article will look at JavaScript‘s “pop()” method with examples. We also look at some of the alternatives to the pop method.
Table of Contents
Array pop
The pop method removes and returns the array’s last element. If the array is empty, it will do nothing but return undefined.
It mutates the array and changes its length.
The pop method returns the element it removed from the array. If it does not remove any element or if the array is empty, then it returns undefined.
Note that if the pop method returns undefined does not mean that the array is empty. It may happen the element it removed has undefined in it, or it may be an empty slot(sparse array)
The pop method is generic. We can use it against array-like objects.
Syntax
The syntax of the array.pop method is as follows:
1 2 3 | array.pop() |
Array pop Example
In the following code. we create an array of numbers and then call the pop() method on it. The method removes the last element from the array, the number 5, and returns its value. We store the returned value in a variable named lastNumber. Finally, we log the modified array and the removed value to the console.
1 2 3 4 5 6 | let numbers = [1, 2, 3, 4, 5]; let lastNumber = numbers.pop(); console.log(numbers); // [1, 2, 3, 4] console.log(lastNumber); // 5 |
Vs. Shift
Array shift & pop are similar, except that shift removes the element from the start of the array and not from the end.
The code below calls the shift method on numbers array. As you can see it will remove the first element and of the array and returns it.
1 2 3 4 5 6 | let numbers = [1, 2, 3, 4, 5]; let lastNumber = numbers.shift(); console.log(numbers); // [ 2, 3, 4, 5 ] console.log(lastNumber); // 1 |
Vs. Slice
The slice method can remove the last element and return the new array.
The slice method is much slower than the pop method, as the pop method only requires removing the last element. The slice method needs to create a new array and update each element with the values from the original array.
The advantage of the slice method is that it does not alter the original array.
The slice method returns the new array, while pop returns the element it removes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let numbers = [1, 2, 3, 4, 5]; let newNumbers = numbers.slice(0, -1); //you can also use //numbers.slice(0, numbers.length - 1); //New Array is returned console.log(newNumbers) //[ 1, 2, 3, 4 ] //The original array is intact console.log(numbers) //[ 1, 2, 3, 4, 5 ] |
Vs splice()
The splice is another way to remove the last element from the array. The syntax of the splice is as follows.
1 2 3 | array.splice(start, deleteCount, item1, item2, ...) |
Where start is the index position from where you want to remove the elements, and deleteCount is the number of elements you want to remove from the array. The subsequent arguments if any are inserted at at start index.
By setting start as numbers.length - 1 and deleteCount as 1, we can remove the last element from the array.
splice just like pop mutates the original array.
1 2 3 4 5 6 7 8 9 10 11 | let numbers = [1, 2, 3, 4, 5]; lastNumbers = numbers.splice(numbers.length - 1, 1); //You can also use which is the same as above //numbers.splice(-1, 1); console.log(numbers); // [1, 2, 3, 4] console.log(lastNumbers); // [5] |
The splice method may be faster than the pop method when you want to remove multiple elements from the end of the array.
Array Like objects and pop method
The pop() method is generic. It only expects this value to have a length property and integer-keyed properties.
In the following code arrayLike object contains properties with integer property names and a length property. We can invoke the call function in JavaScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const arrayLike = { length: 2, unrelated: "foo", 0: 0, 1: 1, 2: 2, }; console.log(Array.prototype.pop.call(arrayLike)); //2 console.log(arrayLike); //{ '0': 0, '1': 1, length: 2, unrelated: 'foo' } |
If the object is not an array-like object, the pop method does not throw any errors. But adds the length property with the value zero.
1 2 3 4 5 6 7 8 9 10 | const plainObj = { unrelated: "foo",}; console.log(plainObj); //{ unrelated: 'foo' } Array.prototype.pop.call(plainObj); //nothing is removed. but length property was added console.log(plainObj); //{ unrelated: 'foo', length: 0 } |
Summary
- The pop method removes and returns the array’s last element. If the array is empty, it will do nothing but return undefined.
- It mutates the array and changes its length.
- The splice is another alternative to remove the last element from the array.
