The Essential Methods

Array methods are the verbs that make arrays pleasant: add this item, remove that one, find the first match, copy this section, flatten these rows. You could do all of it with indexes and loops, but these methods say the intent directly — and they reduce the number of off-by-one mistakes you have to debug.

Add and remove at either end

Four methods handle the ends of an array:

• push(value) adds to the end.
• pop() removes from the end.
• unshift(value) adds to the beginning.
• shift() removes from the beginning.

push and unshift return the new length. pop and shift return the value they removed.

const line = ["Mina", "Rae"];
 
const newLength = line.push("Sol");
const firstServed = line.shift();
 
line.unshift("Kai");
const lastWaiting = line.pop();
 
console.log(newLength);
console.log(firstServed);
console.log(lastWaiting);
console.log(line[0]);
console.log(line[1]);
console.log(line.length);

→ 3, Mina, Sol, Kai, Rae, 2.

These four methods mutate the array. That means they change the same array object in place. A const array can still be changed this way, because 6.1's rule still applies: const protects the name, not the array.

Think of the array as a line of people. push and pop work at the back of the line. unshift and shift work at the front.

Find exact values and matching rules

When you already know the exact value you want, use indexOf or includes.

When you need a rule, use find or findIndex. Those two receive callbacks, the same "hand a function to another function" pattern from 5.5.

const scores = [42, 67, 91, 67];
 
console.log(scores.indexOf(67));
console.log(scores.indexOf(100));
console.log(scores.includes(91));
console.log(scores.includes(12));
 
console.log(scores.find(score => score > 80));
console.log(scores.findIndex(score => score > 80));
console.log(scores.find(score => score > 100));
console.log(scores.findIndex(score => score > 100));

→ 1, -1, true, false, 91, 2, undefined, -1.

The return values are the part to memorize:

• indexOf(value) returns the first matching index, or -1.
• includes(value) returns true or false.
• find(callback) returns the first matching value, or undefined.
• findIndex(callback) returns the first matching index, or -1.

That -1 matters. A missing item is not at index 0; index 0 is the first real slot. -1 is JavaScript's "not found" signal for index-returning methods.

slice copies; splice changes

This pair is famous because the names differ by one letter and the behavior is completely different.

slice(start, end) returns a copy of part of the array. The start index is included, the end index is excluded, and the original array is unchanged.

const letters = ["a", "b", "c", "d"];
 
const middle = letters.slice(1, 3);
 
console.log(middle[0]);
console.log(middle[1]);
console.log(letters[0]);
console.log(letters[1]);
console.log(letters[2]);
console.log(letters[3]);

→ b, c, then the original still prints a, b, c, d.

splice(start, deleteCount, replacement...) mutates the array. It removes deleteCount items starting at start, inserts any replacements you give it, and returns the removed items.

const letters = ["a", "b", "c", "d"];
 
const removed = letters.splice(1, 2, "B", "C");
 
console.log(removed[0]);
console.log(removed[1]);
console.log(letters[0]);
console.log(letters[1]);
console.log(letters[2]);
console.log(letters[3]);

→ b, c, then the changed array prints a, B, C, d.

The wrong mental shortcut is "both take a section." The useful mental shortcut is: slice copies; splice performs surgery. If you want the original array untouched, reach for slice.

Try it — inspect the method returns

Before you run this, predict which names point at changed arrays and which names point at new arrays. At the › prompt, try tasks, copied, and removed to see the arrays directly.

The method names are not random once you watch their returns. push mutates and returns a number. slice leaves the source alone and returns a new array. splice mutates and returns the removed items.

Combine, flatten, fill, and convert

The remaining essential methods are small, but you will see them constantly.

concat returns a new array by joining arrays and values. It does not change the original arrays.

const frontRow = ["Mina", "Rae"];
const backRow = ["Sol"];
const roster = frontRow.concat(backRow, "Kai");
 
console.log(frontRow.length);
console.log(roster.length);
console.log(roster[0]);
console.log(roster[2]);
console.log(roster[3]);

→ 2, 4, Mina, Sol, Kai.

flat() removes one layer of nesting by default:

const rows = [
  ["Mina", "Rae"],
  ["Sol", "Kai"],
];
const names = rows.flat();
 
const seats = ["open", "open", "open"];
seats.fill("reserved", 1);
 
const letters = Array.from("Mina");
 
console.log(names[0]);
console.log(names[3]);
console.log(seats[0]);
console.log(seats[1]);
console.log(seats[2]);
console.log(Array.isArray(letters));
console.log(letters[0]);
console.log(letters.length);

→ Mina, Kai, open, reserved, reserved, true, M, 4.

fill(value, start) writes the same value from start to the end of the array. It mutates. Use it comfortably with primitives like strings and numbers; object values have a reference wrinkle coming in 7.4.

Array.from(arrayLike) turns an array-like value into a real array. Here the string "Mina" has length and bracket access, so Array.from("Mina") gives you ["M", "i", "n", "a"] as a real array.

You now have the practical method vocabulary for adding, removing, finding, copying, flattening, filling, and converting arrays. Next, 6.3 focuses on the three data-transformation methods JavaScript developers use constantly: map, filter, and reduce.