push(), pop(), shift(), unshift()

Syntax

arr.push(item); arr.pop();
arr.unshift(item); arr.shift();

Examples

const stack = [1, 2, 3];

stack.push(4);        // adds to the end
console.log(stack);   // [1, 2, 3, 4]

const removed = stack.pop(); // removes and returns the last element
console.log(removed);  // 4
console.log(stack);    // [1, 2, 3]

const queue = [2, 3, 4];

queue.unshift(1);     // adds to the start
console.log(queue);   // [1, 2, 3, 4]

const first = queue.shift(); // removes and returns the first element
console.log(first);    // 1
console.log(queue);    // [2, 3, 4]

const arr = [3];
arr.push(4, 5, 6);
console.log(arr); // [3, 4, 5, 6]

arr.unshift(1, 2);
console.log(arr); // [1, 2, 3, 4, 5, 6]

Best practices

• Prefer push()/pop() over unshift()/shift() when performance matters - operating on the end of an array is significantly faster
• Remember all four methods mutate the original array - use spread syntax ([...arr, newItem]) instead if you need an immutable update
• Use push() to build up an array in a loop rather than repeatedly using concat(), which creates a new array each time
• Check array length before calling pop()/shift() on a potentially empty array, since they return undefined rather than throwing

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation