Array .push() / pop() / shift() / unshift()

// Adds one or more elements to the end of the array.
array.push(element1, element2, ...);

// Removes and returns the last element of the array.
var removed = array.pop();

// Adds one or more elements to the beginning of the array.
array.unshift(element1, element2, ...);

// Removes and returns the first element of the array.
var removed = array.shift();

sample_push.js

// Pattern 1: Basic operations (push / pop / unshift / shift)
var members = ["Kiryu Kazuma", "Majima Goro"];

// Adds an element to the end.
members.push("Akiyama Shun");
console.log(members); // Outputs "Kiryu Kazuma,Majima Goro,Akiyama Shun".

// Removes the last element.
var last = members.pop();
console.log(last); // Outputs "Akiyama Shun".
console.log(members); // Outputs "Kiryu Kazuma,Majima Goro".

// Adds an element to the beginning.
members.unshift("Nishikiyama Akira");
console.log(members); // Outputs "Nishikiyama Akira,Kiryu Kazuma,Majima Goro".

// Removes the first element.
var first = members.shift();
console.log(first); // Outputs "Nishikiyama Akira".
console.log(members); // Outputs "Kiryu Kazuma,Majima Goro".

// Pattern 2: Return value of push (new length of the array)
var party = ["Saejima Taiga"];
var newLength = party.push("Akiyama Shun", "Shinada Tatsuo");
console.log(newLength); // Outputs 3 — the new length after adding.
console.log(party); // Outputs "Saejima Taiga,Akiyama Shun,Shinada Tatsuo".

// Pattern 3: Stack (last-in, first-out)
var stack = [];
stack.push("Kiryu Kazuma");
stack.push("Majima Goro");
stack.push("Nishikiyama Akira");
console.log(stack.pop()); // Outputs "Nishikiyama Akira" — the last one added comes out first.
console.log(stack.pop()); // Outputs "Majima Goro".
console.log(stack.length); // Outputs 1.

// Pattern 4: Queue (first-in, first-out)
var queue = [];
queue.push("Kiryu Kazuma");
queue.push("Majima Goro");
queue.push("Akiyama Shun");
console.log(queue.shift()); // Outputs "Kiryu Kazuma" — the first one added comes out first.
console.log(queue.shift()); // Outputs "Majima Goro".
console.log(queue.length); // Outputs 1.

[ 'Kiryu Kazuma', 'Majima Goro', 'Akiyama Shun' ]
Akiyama Shun
[ 'Kiryu Kazuma', 'Majima Goro' ]
[ 'Nishikiyama Akira', 'Kiryu Kazuma', 'Majima Goro' ]
Nishikiyama Akira
[ 'Kiryu Kazuma', 'Majima Goro' ]
3
[ 'Saejima Taiga', 'Akiyama Shun', 'Shinada Tatsuo' ]
Nishikiyama Akira
Majima Goro
1
Kiryu Kazuma
Majima Goro
1

These four methods are the most fundamental ways to manipulate elements at the end and beginning of an array. push() and pop() operate on the end, while unshift() and shift() operate on the beginning. All four are mutating methods that modify the original array directly.

push() can add multiple elements at once by passing them as comma-separated arguments, and its return value is the new length of the array. pop(), on the other hand, takes no arguments and returns the removed element itself. These two methods are commonly used together to implement a stack (last-in, first-out) data structure.

To add or remove elements in the middle of an array, use splice().