Arrays are rarely static, you're usually adding a new task, removing a completed one, or inserting something right in the middle of a list. JavaScript gives you a handful of built-in methods for all of this, and the tricky part isn't really learning them, it's remembering which one works at which end of the array, and which ones quietly change your original array versus leaving it untouched. Let's go through all of it with real examples.
 

Table of Contents

---

 

Adding to the End: push()

This is the one you'll use constantly, it adds one or more items to the end of an array.

let tasks = ["wake up", "code"];
tasks.push("sleep");
console.log(tasks); // ["wake up", "code", "sleep"]

tasks.push("eat", "exercise"); // you can add multiple at once
console.log(tasks); // ["wake up", "code", "sleep", "eat", "exercise"]

push() modifies the original array directly and returns the new length, not the array itself, which catches people off guard occasionally.

let newLength = tasks.push("relax");
console.log(newLength); // 6, not the array

Removing From the End: pop()

The opposite of push(), it removes the last item and hands it back to you.

let fruits = ["apple", "banana", "mango"];
let removed = fruits.pop();

console.log(removed); // "mango"
console.log(fruits);  // ["apple", "banana"]

If the array is already empty, pop() just returns undefined instead of throwing an error.

console.log([].pop()); // undefined

 

Adding to the Beginning: unshift()

Works just like push(), except it adds to the front of the array instead of the end.

let queue = ["second", "third"];
queue.unshift("first");
console.log(queue); // ["first", "second", "third"]

Worth knowing, unshift() is slower than push() on large arrays, since every existing item has to shift over to make room at the front.
 

Removing From the Beginning: shift()

Removes the first item and returns it.

let line = ["Vi", "Sam", "Alex"];
let next = line.shift();

console.log(next); // "Vi"
console.log(line); // ["Sam", "Alex"]

A genuinely common real-world use case is processing a queue, where you keep calling shift() to handle items one at a time in the order they arrived.
 

Adding or Removing Anywhere: splice()

This is the most flexible method on the list, it can remove, insert, or replace items at any position, not just the start or end.

Removing items from the middle:

let nums = [1, 2, 3, 4, 5];
nums.splice(1, 2); // start at index 1, remove 2 items
console.log(nums); // [1, 4, 5]

Inserting items without removing anything, by passing 0 as the second argument:

let colors = ["red", "blue"];
colors.splice(1, 0, "green");
console.log(colors); // ["red", "green", "blue"]

Replacing items, removing and inserting in one go:

let letters = ["a", "b", "c"];
letters.splice(1, 1, "x", "y");
console.log(letters); // ["a", "x", "y", "c"]

splice() modifies the original array and returns the removed items as a new array, which is genuinely useful if you need to know exactly what got taken out.

let items = [1, 2, 3, 4];
let takenOut = items.splice(1, 2);
console.log(takenOut); // [2, 3]
console.log(items);    // [1, 4]

 

A Non-Destructive Alternative: slice()

It's easy to confuse slice() with splice(), but they behave very differently. slice() doesn't remove anything, it just returns a copy of a portion of the array, leaving the original completely untouched.

let original = [1, 2, 3, 4, 5];
let piece = original.slice(1, 3);

console.log(piece);    // [2, 3]
console.log(original); // [1, 2, 3, 4, 5], unchanged

If you want to add or remove without touching the original array at all, combining slice() with the spread operator is a clean, modern approach.

let arr = [1, 2, 3];
let withoutFirst = arr.slice(1);
let withNewItem = [...arr, 4];

console.log(withoutFirst); // [2, 3]
console.log(withNewItem);  // [1, 2, 3, 4]
console.log(arr);          // [1, 2, 3], unchanged either way

 

Quick Reference

Method	Adds or Removes	Where	Changes Original?
push()	Adds	End	Yes
pop()	Removes	End	Yes
unshift()	Adds	Start	Yes
shift()	Removes	Start	Yes
splice()	Both	Anywhere	Yes
slice()	Neither (copies)	Anywhere	No

 

Conclusion

Once you've got these methods straight, reshaping an array stops feeling like guesswork. push and pop for the end, unshift and shift for the beginning, splice when you need to work anywhere in the middle, and slice for the rare moments you want a piece of the array without touching the original at all. The names aren't always intuitive at first, but the pattern behind them is simple once it clicks.
 

Frequently Asked Questions (FAQs)

1.What's the easiest way to remember push vs. unshift?

Push goes with the end, think of pushing something onto the back of a line. Unshift adds to the front, which is the less common, slightly less intuitive direction, so it's worth double-checking until it becomes second nature.

2.Does splice() work if I only pass it one argument?

Yes, array.splice(2) removes everything from index 2 onward, since the second argument defaults to removing all remaining items if you leave it out.

3.Why does slice() not change my original array, but splice() does?

They're built for different jobs. slice() is meant for safely copying a portion of an array, while splice() is meant for directly editing the array in place, which is exactly why their names sound so similar but behave so differently.