Array Methods

Search before you change

indexOf returns an index, or -1 when no item matches. Index zero is a valid position, so a truthiness check is wrong here. splice changes an array in place; its second argument is a count, not an ending index. Guard the missing case, because splice(-1, 1) would remove the final item.

const topics = ["Loops", "Arrays", "Functions"];
const index = topics.indexOf("Arrays");

if (index !== -1) {
  topics.splice(index, 1);
}

console.log(topics.join(", "));
console.log(topics.indexOf("Objects"));

Loops, Functions
-1

Reading a list safely

Use for…of when you need values and a numeric loop when the position matters. Reading past the end returns undefined; it does not wrap around. Empty arrays are truthy, so check length to learn whether they contain items.

includes asks whether a value such as a string or number is present. For an array of objects, it compares references, not matching properties. Tomorrow you will use callbacks to search records by a property. Today, a loop and a condition are enough.

Design task: describe whether removing an item should update the original list or return a revised copy. If you need a copy, start with spread and splice that copy. Recall that this only copies the array container, not nested records.

Do not confuse a missing match with the final item

indexOf returns -1 when no match exists. That is a sentinel meaning not found, not a position you should pass straight into a removal operation. Splice accepts negative positions counted from the end, so a missing search followed by splice can delete real data.

Splice edits its array; slice creates a separate array of selected positions. Both use a starting position, but their second arguments mean different things: splice uses a removal count, while slice uses an exclusive end position. Write the intended remaining list before choosing a method.

const topics = ["Loops", "Arrays", "Objects"];
const missing = topics.indexOf("Functions");

console.log(missing);

if (missing !== -1) {
  topics.splice(missing, 1);
}

console.log(topics.join(", "));

-1
Loops, Arrays, Objects

The guard keeps the original list intact. Try the actual match Arrays to verify that one removal happens, rather than treating every search result as a valid index.

const topics = ["Loops", "Arrays", "Objects"];
const middle = topics.slice(1, 2);

console.log(middle.join(", "));
console.log(topics.length);
topics.splice(1, 1);
console.log(topics.join(", "));

Arrays
3
Loops, Objects

Slice stops before position 2 and leaves topics alone. Splice removes one item at position 1. The matching numbers in this example are a coincidence; the second parameter has a different meaning.

Try the rule on new inputs

Try removing the first item, last item and a missing item. Predict the output of slice(0,2) before running. Avoid adding sorting or callbacks yet; the important skill here is choosing positions and mutation deliberately.

const topics = ["Loops", "Arrays"];
// Keep topics unchanged.

const topics = ["Loops", "Arrays"];
const revised = [...topics];
const index = revised.indexOf("Loops");

if (index !== -1) {
  revised.splice(index, 1);
}

console.log(revised.join(", "));
console.log(topics.length);

Arrays
2

Recall

Why is index zero different from “not found”? Contrast slice with splice: one copies a portion, the other edits the array.