7 min read

Eye Training · Objects and Arrays

Two questions catch most of these: does this method change the original, and is this a copy or the same object?

Part 2 · Surface 20. Bug counts are hidden and some snippets are clean. See Start Here for how to use these drills.


J · The basics

Bug hunt
J · Top scores
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
J · Is it in the list?
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
J · Shipping address
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
J · Admin check
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
J · Preview the first three
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
J · Highest prices
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min

M · Three years in, these should jump out

Bug hunt
M · Top products
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
M · Copy the event
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
M · Seating grid
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
M · Parse the page numbers
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
M · Cart total
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
M · Merge options
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
M · Paging parameters
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 2 min
Bug hunt
M · Count words
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min

S · Where seniors stand out

Bug hunt
S · Count tags
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 1 min
Bug hunt
S · Save settings
Bug count hidden, and some snippets are clean. Click every line you think is wrong (or none), then check.
0:00 / 2 min

What your eye checks

Whenever you see an array or object method, ask:

  1. Does it change the original? sort, reverse, splice, push, fill, Object.assign(target, …) mutate. slice, map, filter, toSorted, spread don't.
  2. Is this a copy or the same object? Spread copies one level, fill repeats one reference, JSON round trips change types. structuredClone makes a deep copy.
  3. What does it return when nothing matches? find gives undefined, indexOf gives -1 (truthy), Math.max() gives -Infinity.
  4. Is equality by value or by identity? === on arrays and objects compares references.
  5. Does the callback get extra arguments? map passes (value, index, array), which breaks parseInt.
  6. Does reduce have a starting value?
  7. Do defaults cover null? Destructuring defaults and default parameters only replace undefined.
  8. Are user-controlled strings used as object keys? Inherited keys collide; __proto__ pollutes. Use Map or Object.create(null).

Tells

You seeAsk
.sort() with no compare functionNumbers?
.sort( on a parameterWhose array is being reordered?
if (list.indexOf(x))What about index 0?
.find(…).propWhat if nothing matches?
=== [ or === {Identity, not contents.
.splice( where slice would doIs the original changed?
JSON.parse(JSON.stringify(Dates? undefined? Maps?
Array(n).fill([]) / fill({})One shared object?
.map(parseInt)Index as radix.
.reduce(fn) with one argumentEmpty array? First element's type?
Object.assign(someShared, …)Mutating the shared one?
const { x = default } = bodyWhat if x is null?
obj[userString]constructor? __proto__?

Go deeper