JavaScript Arrays
JavaScript
push,pop,shiftandunshiftadd and remove elements at the ends of an array.
push and pop work at the end of the array.
unshift and shift work at the start.
Example
javascript
const fruits = ["Apple"];
fruits.push("Banana");
console.log(fruits.join(","));The output is Apple,Banana.
push adds one or more elements to the end and returns the new length.
pop removes the last element and returns it.
unshift adds to the start; shift removes from the start.
All four change the original array rather than returning a copy.
Syntax
javascript
array.push(value);
array.pop();
array.unshift(value);
array.shift();Only push and unshift take arguments.
push can add several values at once.
Example
javascript
const list = [1];
list.push(2, 3);
console.log(list.join(","));The output is 1,2,3.
pop gives you back the value it removed.
Example
javascript
const list = [1, 2, 3];
const last = list.pop();
console.log(last);
console.log(list.join(","));The removed value is 3, and the array now holds 1,2.
These do the same job at the front of the array.
Example
javascript
const list = [2, 3];
list.unshift(1);
console.log(list.join(","));
const first = list.shift();
console.log(first);Adding at the front is slower on very large arrays, because every index moves.
The return value is the length, not the array.
Example
javascript
const list = ["a"];
const size = list.push("b");
console.log(size);A common mistake is expecting the array back.
These four methods modify the array in place.
If you need to keep the original, make a copy first.
Example
javascript
const original = [1, 2];
const copy = [...original];
copy.push(3);
console.log(original.length);
console.log(copy.length);The original still has two elements.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript push and pop</title>
</head>
<body>
<h1>JavaScript push and pop</h1>
<p id="result"></p>
<script>
const queue = ["Ada"];
queue.push("Grace");
queue.unshift("Alan");
document.getElementById("result").innerHTML = queue.join(", ");
</script>
</body>
</html>Run the above example in the Try It Editor.
Try removing someone:
Add queue.pop(); before the output line and see who disappears.
push adds to the end and returns the new length.pop removes the last element and returns it.unshift adds to the start and shift removes from it.These four methods are how you grow and shrink an array from either end.
Because they change the array in place, be careful when the array is shared.
Understanding them is the basis for stacks and queues.