JavaScript Array Methods

Mutate or copy

Some methods edit the array you already have. Others return a new array and leave the original alone. If you pass a list into a function and it comes back shorter, you mutated it. That is not a bug if you meant to — it is a bug if another part of the page still needed the old items.

push and pop

push(item) adds at the end and returns the new length. pop() removes the last item and returns it. Both mutate. The end of the list is the cheap end: these two are the usual stack operations.

const tasks = ["write", "review"];
const newLength = tasks.push("ship");
const last = tasks.pop();

console.log(newLength);
console.log(last);
console.log(tasks);

document.body.textContent = tasks.join(", ") + " / popped " + last;

unshift and shift

unshift(item) inserts at index 0. shift() removes index 0 and returns it. Both mutate. Every later item has to move, so these are slower on long lists. Use them when the front of the queue is the point.

const queue = ["second", "third"];
queue.unshift("first");
const served = queue.shift();

console.log(served);
console.log(queue);

document.body.textContent = "served " + served + " / left " + queue.join(", ");

splice edits in the middle

splice(start, deleteCount, ...items) removes deleteCount items atstart and, if you pass extra arguments, inserts them there. It mutates and returns the removed items as an array.

splice(1, 1) deletes one item at index 1. splice(1, 0, "new") inserts without deleting. splice(1, 1, "new") replaces that one slot.

const letters = ["a", "b", "c", "d"];
const removed = letters.splice(1, 2, "X", "Y");

console.log(removed);
console.log(letters);

document.body.textContent =
  "removed " + removed.join(", ") + " / now " + letters.join(", ");

concat and slice copy

concat(other) returns a new array with the items of both lists. Neither original changes.slice(start, end) returns a copy from start up to but not includingend. Omit both arguments and you copy the whole list.

const a = [1, 2];
const b = [3, 4];
const joined = a.concat(b);
const middle = joined.slice(1, 3);

console.log(a);
console.log(joined);
console.log(middle);

document.body.textContent =
  "a stays " + a.join(",") + " / joined " + joined.join(",");

Which methods mutate

join(separator) builds a string. It does not change the array. That is how the examples print a readable list onto the page.

What to remember

• End of the list: push and pop.
• Front of the list: unshift and shift.
• splice edits in place. concat and slice copy.
• Log the array after a mutating call before you assume it is unchanged.

Next: walking a list with forEach, map, filter, and find.