JavaScript — Array Methods

Two families

Mutators change the original array; non-mutators return new data. Knowing which is which prevents most array bugs:

Mutates?	Methods
Yes	push pop shift unshift splice sort reverse
No	slice concat join indexOf includes flat map filter reduce find

Searching

const langs = ["js", "python", "rust", "js"];

langs.indexOf("rust");        // 2   (-1 when missing)
langs.includes("go");         // false
langs.find(l => l.length > 3);// "python"  first MATCHING ITEM
langs.findIndex(l => l[0] === "r"); // 2   its index
langs.lastIndexOf("js");      // 3

find/findIndex take a predicate function — search by condition, not just value.

Adding/removing anywhere: splice vs slice

// SPLICE mutates — cut/insert at position
let tools = ["hammer", "saw", "drill", "wrench"];
tools.splice(1, 1);            // removes index 1 → ["hammer","drill","wrench"]
tools.splice(0, 0, "tape");    // insert at front, delete nothing
tools.splice(2, 1, "sander");  // replace index 2

// SLICE copies — same signature spirit, zero mutation
const part = tools.slice(1, 3); // new array, tools unchanged

Remember: splice = surgery on the original · slice = photocopy.

Joining & flattening

["a","b","c"].join("-");       // "a-b-c"
[[1,2],[3]].flat();             // [1,2,3]
[[1,[2]]].flat(Infinity);       // deep flatten
[1,2].concat([3], [4]);         // [1,2,3,4] (spread does this too)

Reversing & copying

const nums = [1, 2, 3];
nums.reverse();          // mutates! → [3,2,1]

const safe = [...nums].reverse();   // copy first, then flip
nums.toReversed();                  // modern non-mutating alternative
nums.with(0, 99);                   // modern: copy with one slot changed

Chaining pipelines

Non-mutators return arrays, enabling assembly lines:

const cart = [
    { name: "Keyboard", price: 80 },
    { name: "Cable",    price: 9  },
    { name: "Monitor",  price: 240 },
];

cart.filter(i => i.price > 20)
    .map(i => i.name)
    .join(", ");
// "Keyboard, Monitor"

Deep dives arrive in map/filter/reduce lessons.

Method cheat sheet

I want to…	Use
Add/remove at ends	push/pop/shift/unshift
Cut/insert mid-array	splice (mutating)
Copy a section	slice
Test existence	includes, some/every
Find item/index	find/findIndex/indexOf
Merge/flatten	concat, spread, flat
Text output	join

Common mistakes: using slice expecting deletion; forgetting sort/reverse mutate; indexOf on objects (always -1 — reference compare!).

Mini Practice

1. Queue simulator with push/shift; stack with push/pop
2. Remove "saw" three ways: splice, filter, slice-combine
3. Flatten a 3-level nested array fully
4. Rebuild a sentence: split(" ") → reverse → join(" ")
5. Prove splice/slice difference with logs before/after each

Next: array sort →