Add, Remove, Combine
JavaScript Array Methods
The core methods for working with arrays — push/pop, shift/unshift, concat, slice, splice, and how to know which mutate.
What you'll learn
- Add and remove items from either end
- Copy or slice an array
- Combine arrays
- Know which methods mutate and which don't
A tour of the methods you’ll reach for whenever you have an array.
Adding to Either End
const stack = ["a", "b"];
stack.push("c"); // add to END
console.log(stack); // ["a", "b", "c"]
const last = stack.pop(); // remove from END
console.log(last); // "c"
console.log(stack); // ["a", "b"]const queue = ["b", "c"];
queue.unshift("a"); // add to FRONT
console.log(queue); // ["a", "b", "c"]
const first = queue.shift(); // remove from FRONT
console.log(first); // "a"
console.log(queue); // ["b", "c"]All four mutate the array in place.
| Method | Adds / removes | Where | Returns |
|---|---|---|---|
push(x) | adds | end | new length |
pop() | removes | end | the removed item |
unshift(x) | adds | start | new length |
shift() | removes | start | the removed item |
Slicing Out a Range — slice (non-mutating)
slice(start, end) returns a new array with the items from
start (inclusive) up to end (exclusive). Original is untouched.
const letters = ["a", "b", "c", "d", "e"];
console.log(letters.slice(1, 4)); // ["b", "c", "d"]
console.log(letters.slice(2)); // ["c", "d", "e"] ← to the end
console.log(letters.slice(-2)); // ["d", "e"] ← last two
console.log(letters); // ["a","b","c","d","e"] (unchanged)slice() with no arguments is a quick way to copy an array.
Inserting and Removing in the Middle — splice (mutating)
splice(start, deleteCount, ...itemsToInsert) is the swiss army knife
for editing an array in place.
const todo = ["wake up", "read", "sleep"];
// Insert at index 2:
todo.splice(2, 0, "eat", "code");
console.log(todo); // ["wake up", "read", "eat", "code", "sleep"]
// Remove 2 starting at index 1:
todo.splice(1, 2);
console.log(todo); // ["wake up", "code", "sleep"]
// Replace at index 1:
todo.splice(1, 1, "compile");
console.log(todo); // ["wake up", "compile", "sleep"]Combining: concat and Spread
const a = [1, 2];
const b = [3, 4];
const c = [5, 6];
console.log(a.concat(b, c)); // [1, 2, 3, 4, 5, 6]
console.log(a); // [1, 2] (unchanged)The modern idiom uses spread instead, which reads cleaner and works the same:
const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b, 5];
console.log(combined); // [1, 2, 3, 4, 5]Reversing and Joining
const a = [1, 2, 3];
a.reverse();
console.log(a); // [3, 2, 1] ← mutates
const words = ["the", "quick", "brown", "fox"];
console.log(words.join(" ")); // "the quick brown fox"
console.log(words.join("-")); // "the-quick-brown-fox"
console.log(words.join("")); // "thequickbrownfox"Checking Inclusion: includes / indexOf
Same names as strings, same behavior:
const fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("kiwi")); // false
console.log(fruits.indexOf("grape")); // 2
console.log(fruits.indexOf("kiwi")); // -1Modern Non-Mutating Versions (ES2023)
Each mutating method has a non-mutating twin that returns a new array:
| Mutates | Doesn’t mutate (ES2023) |
|---|---|
sort() | toSorted() |
reverse() | toReversed() |
splice() | toSpliced() |
arr[i] = x | with(i, x) |
These are great when you want a copy with one change — without mutating shared state.
Up Next
The most powerful (and most-used) array methods — map, filter,
reduce, forEach.