Objects, Arrays & JSON

Core concepts

1. Object literals & property shorthand: { name, age }. — MDN: Working with objects
2. Destructuring & spread: Pull fields from objects/arrays; clone shallowly with { ...obj }. — MDN: Destructuring assignment
3. Arrays: map, filter, reduce, find, some, every — prefer over manual for when transforming data. — W3Schools: JavaScript arrays
4. Prototypes: Objects delegate missing keys up the chain — classes are syntactic sugar over prototypes. — MDN: Inheritance and the prototype chain
5. JSON: JSON.stringify / JSON.parse for wire format — no functions, undefined, or BigInt by default. — MDN: JSON

const user = { id: 1, name: 'Ada', tags: ['dev'] };
const { name, ...rest } = user;
const tags = user.tags.map((t) => t.toUpperCase());

Concept videos

YouTube lessons for these topics. On a large screen they open in the reading panel next to the roadmap, same as the article links on each core concept.

• Arrays & methods — JavaScript Crash Course (Traversy Media)
• Objects & JSON — JavaScript Data Types (Programming with Mosh)

Explanation

Objects and arrays are the furniture of JavaScript programs — everything from React state to API responses lands here. References mean two variables can point at the same couch; mutating one room affects the other unless you copy intentionally.

Object literals & property shorthand

When variable names match keys, { name, age } saves typing. Objects group related data — a user, a cart line, a config flag. Think of each object as a labeled folder in a filing cabinet.

Destructuring & spread

Destructuring unpacks folders: const { name } = user. Spread { ...user } creates a shallow photocopy — nested arrays/objects still share references. That matters when you update React state immutably: copy top level, then clone nested pieces you change.

Arrays

Higher-order methods express intent: map transforms, filter selects, reduce folds into one value. They read like sentences compared to manual index loops. Interviews love reduce because it can build maps, sums, and grouping in one pass.

Prototypes

When you read user.toString(), JavaScript walks a hidden chain until it finds a matching function. Classes in modern syntax still compile to prototype links. Composition (“has-a”) often beats deep inheritance trees in app code.

JSON

JSON is the postcard format of the web — text only, no functions. JSON.stringify drops undefined keys; JSON.parse returns plain objects, not class instances. For APIs, validate parsed JSON before trusting shapes in production.

What Is It?

Objects group named fields; arrays order values. Most UI state and REST payloads are nested combinations of both.

Reference semantics mean assignment copies pointers, not deep clones — mutating nested data surprises teammates.

JSON is a text interchange format: a subset of object/array literal syntax safe for HTTP bodies.

Why Should I Care?

Immutability patterns in React and Redux start with copying objects and arrays correctly.

Bad parsing or mutating shared state causes heisenbugs in lists, forms, and caches.

Real World Analogy

Objects are labeled folders; arrays are numbered shelves. JSON is the photocopy format you mail between buildings — it only copies paper, not live plants (functions, undefined).

Visual Mental Model

API server --JSON--> client
  { "id": 1, "items": [] }
  parse/stringify at boundaries

Beginner Explanation

Learn destructuring, spread, and shallow vs deep copy. APIs speak JSON — know what gets lost in translation.

Smallest Possible Example

const user = { name: "Ada", tags: ["dev"] };
const copy = { ...user, tags: [...user.tags, "js"] };
console.log(JSON.stringify(copy));

Common Mistakes

❌ Spread-copying nested objects and mutating inner fields.

Spread is shallow. Nested objects are still shared unless you clone deeper.

❌ Using JSON.parse on untrusted input without validation.

Parsing is fine; trusting shape is not. Validate before using business-critical fields.

❌ Using arrays as dictionaries with sparse holes.

Use objects or Maps for keyed lookups; arrays excel at ordered collections.

Real Project Example

GitHub REST and GraphQL responses are JSON objects consumed by millions of CLIs.

Notion and Airtable APIs expose records as JSON documents with nested properties.

Build This Mini Project

Fetch a public JSON API, map results to a new array of simplified objects with destructuring, and render counts without mutating the original response object.

Interview Question

What is the difference between shallow and deep copy?

Shallow copy duplicates top-level properties but nested objects/arrays still reference the same inner data. Deep copy recursively clones nested structures (structuredClone, libraries, or manual recursion), which costs more but isolates mutations.

Key Takeaways

• Objects and arrays are references by default.
• Spread/rest are daily tools — know their limits.
• JSON is for data, not code.
• Validate external JSON before use.

Resources

• MDN: Working with objects
• MDN: JSON

The 60-second story

Two roommates share one whiteboard on the fridge. Maya writes “milk” on it. Jordan does not get a photocopy. Jordan is looking at the same board. If Maya erases “milk,” Jordan’s view changes too. That is a reference. A number in a text message is different: you sent a copy, and their phone does not update when you change your mind.

Objects and arrays are whiteboards. Assigning const cart = otherCart does not clone the shopping list. Both names point at one list. { ...obj } and [...items] are a quick photo of the top layer. If a value on that board is itself another board, the photo still points at the original inner board. That is a shallow copy. It surprises people who thought the spread operator was a photocopier for the whole apartment.

Map the kitchen.

• The whiteboard is an object or array.
• Two names for one board are references.
• { name, age } is writing both the label and the value in one stroke. That is property shorthand.
• Pulling “eggs” and “bread” off the board into your hands is destructuring.
• map, filter, and reduce are recipes that return a new list instead of scribbling over the old one.
• The prototype chain is a house rule taped inside a cabinet: if the board does not say how to toString, look in the cabinet. Classes are a nicer way to write that cabinet note.
• JSON is a paper receipt you can hand to another kitchen. Receipts cannot hold functions, undefined, or BigInt. If it cannot be written on paper, JSON.stringify drops it or throws.

const order = { item: 'soup', notes: { spicy: true } };
const copy = { ...order };
copy.item = 'salad';
copy.notes.spicy = false;

order.item is still soup. order.notes.spicy is now false. The outer object was copied. The notes whiteboard was shared. That single example explains half of the “why did my state change” bugs in a frontend app.

Arrays got map and filter because loops that push into a second list are easy to get wrong and hard to read. The methods say what you meant: transform, keep, or fold. Prototypes exist because copying every method onto every object would be like printing the house rules on every sticky note. JSON exists because the network does not accept your live whiteboard. It accepts text.

Mental model: whiteboards, not photocopies. If two variables should change together, share the board on purpose. If they should not, copy what you need and remember the inner boards.

You can explain this page if you can say: objects are shared boards, spread is a shallow photo, array methods return new lists, and JSON is the paper version with a short list of things it refuses to carry.