JS Sketchbooksee JavaScript think ✏️
← back to the map
4

Collections

The big question: “How arrays and objects REALLY work: memory, O(1), hashing, references”

but why do we need this?

With one variable per value, a list of 200 test results would need 200 separate variables — result1 through result200 — and a loop couldn’t even visit them one by one. Real data comes in groups, so programs need containers for groups: arrays for ordered lists, objects for labeled bundles. Every API response and every test report you’ll ever handle is built from these two.

in plain words

One jar per value is fine for age — but real data comes in groups: a list of 200 test results, a user with a name, email and password. Arrays are ordered lists (numbered shelf slots); objects are labeled bundles (a locker with named drawers).

This phase also holds the single most important “gotcha” in JavaScript: for arrays and objects, a variable’s box doesn’t hold the thing itself — it holds an arrow pointing to it. Copy the variable and you copy the arrow, not the thing. Two names, one object. Change it through either name and “both” change.

That one picture — arrows, not things — explains an entire family of bugs you will absolutely meet in real test code. You’ll see it animated until it’s impossible to forget.

words you’ll own after this
array

An ordered list of values on numbered shelf slots. Counting starts at 0.

index

A slot’s number in an array. The first item is index 0.

object

A bundle of labeled values: { name: "Lijas", role: "tester" }. Each label is a key, each content a value.

reference

The “arrow” a variable holds instead of the object itself. Copying the variable copies the arrow — both point at the same object.

mutation

Changing an object or array in place. Everyone holding an arrow to it sees the change.

JSON

A text format for shipping objects around — how servers and tests exchange data. You’ll live in it as an automation tester.

after this phase, you can…
  • Store and read grouped data with arrays and objects
  • Draw the arrows: predict when changing one variable affects another
  • Transform lists with map, filter and reduce — and narrate each step
  • Read and write JSON comfortably
this phase’s lab — see it move

✏️ This phase’s interactive lab is still being drawn — it arrives together with the phase’s lessons.

the lessons
  1. 4.1
    Arrays

    One name, many values — elements in order, found by index.

  2. 4.2
    Inside an array: memory & O(1)

    Contiguous slots, address = start + index × size — why lookup is one jump at any size.

  3. 4.3
    Growing & shrinking

    push, pop, shift, unshift — and the O(n) bill for front-of-array work.

  4. 4.4
    Objects

    Properties: key → value. Fetch by name, not position — dot vs brackets.

  5. 4.5
    Inside an object: the hash trick

    How a WORD becomes an address: hash function → bucket → O(1) by name. Hello, hash maps.

  6. 4.6
    Primitives vs references

    THE lesson: call by value vs call by sharing — what really copies when you write b = a.

  7. 4.7
    Copying & equality

    Shallow vs deep copies, spread — and why {} !== {}.

  8. 4.8
    Iterating collections

    for...of, for...in, and Object.keys / values / entries.

  9. 4.9
    map / filter / reduce

    The transform trio — every element’s journey down the belt.

  10. 4.10
    Sorting & finding

    sort’s string-default gotcha, find, some, every, includes.

  11. 4.11
    Destructuring, spread & rest

    Patterns that mirror shapes — and the options-object style every modern API uses.

  12. 4.12
    Map & Set

    The uniqueness door, and keys of any type — the hash map, offered as dedicated tools.

  13. 4.13
    JSON

    The wire format of every API — flatten an object to text, rebuild it back.

  14. 4.14
    Checkpoint: test-results dashboard

    filter → map → reduce over real run data — your first QA dashboard.