Stop 04 · JavaScriptTopics · 9/36

Objects

In short

A user, a product, an API response: they're all bundles of named values. Objects are how JavaScript holds that kind of data, and you'll read and update them all day.

Key-value collections that model real-world entities — the most fundamental data structure in JavaScript, with shorthand syntax, destructuring and spread. Objects can represent structured application data and behavior, and understanding references, mutation, copying, and property lookup is essential when working with them.

The jaadu mascot proudly holds up a college ID card with its photo on it.

Think of it like this

Your college ID card

Your ID card has fields: name, roll number, branch, photo. An object is that card in code. Each field name is a key, each entry is a value, and you read it by asking for the field name.

Watch it happen

Two names, one object

student

sameCard

The object

points to {name: Kabir}

1/5student holds a reference to one object in memory, not the object itself.

The big ideas

What you need to know

Keys and values

Read with a dot (student.name) or brackets (student["name"]). Brackets let you use a key stored in a variable.

Copied by reference

const b = a doesn't copy the object. Both names point to the same object, so changing one changes both.

Spread makes a shallow copy

{ ...a } copies top-level keys only. For nested objects, use structuredClone(a) to copy everything.

Destructuring pulls values out

const { name, roll } = student creates two variables in one line.

See it in code

Walk through the code

1const student = { name: "Kabir", roll: 42, branch: "CSE" };2 3console.log(student.name);       // "Kabir"4const field = "branch";5console.log(student[field]);     // "CSE" (brackets for dynamic keys)6 7const { name, roll } = student;  // destructuring8const copy = { ...student, roll: 43 };  // copy with one change9 10const sameCard = student;11sameCard.name = "Kabir S";12console.log(student.name);       // "Kabir S" (same object!)13 14console.log(Object.keys(copy));  // ["name", "roll", "branch"]

1/4An object with three keys and their values.

sameCard isn't a new card, it's a second name for the same card. Use spread or structuredClone when you need a real copy.

Save yourself the pain

Common mistakes

Oops

Writing const copy = original and then editing copy.

Do this instead

That edits the original too. Use { ...original } for a flat object or structuredClone(original) for nested ones.

Oops

Comparing two objects with === to check if they have the same data.

Do this instead

=== checks if they're the same object in memory. Compare the fields you care about instead.

Your mission

Make a student profile

~15 min

Quick check

What does this log? const a = { x: 1 }; const b = a; b.x = 5; console.log(a.x);

Go deeper

1Practice object destructuring and the spread operator (`{...obj}`). Test it with at least one normal case and one edge case so you can explain the behavior confidently.
2Learn `Object.keys`, `Object.values` and `Object.entries`. Focus on understanding the underlying reason it works, not only memorizing the definition.
3Try computed property names (`{[key]: value}`).

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download