Perfect. We'll keep the same style throughout.

Rule: Don't look at the answer immediately. Try to predict it first. That's where most learning happens.

Chapter 13 — Objects Deep Dive

🎯 Goal (1 line)

Learn to confidently work with the nested objects used in APIs, React state, and real-world applications.

Quick Refresher (2 minutes)

An object stores related information together.

const user = {
  name: "Alice",
  age: 25,
  city: "Delhi"
};

Access properties:

user.name

user["name"]

MCQ 1 (Easy)

What will this print?

const user = {
  name: "Alice"
};

console.log(user.name);

A. Alice

B. name

C. undefined

D. Error

✅ Answer

Explanation:

user.name accesses the value stored under the name property.

MCQ 2

Which is the correct way to access "Delhi"?

const user = {
  city: "Delhi"
};

user.city

user["city"]

user.cityName

D. Both A and B

✅ Answer

Explanation:

Both dot notation and bracket notation work when the property name is known.

MCQ 3

Predict the output.

const user = {
  age: 20
};

console.log(user.name);

A. null

B. undefined

C. Error

D. 20

✅ Answer

Explanation:

The name property doesn't exist.

JavaScript returns undefined.

MCQ 4

Find the bug.

const user = {
  name: "Bob"
};

console.log(user.Name);

A. No bug

B. Property name is case-sensitive

C. Missing semicolon

D. Should use let

✅ Answer

Explanation:

name and Name are different.

MCQ 5

Output?

const car = {
  brand: "Toyota"
};

car.brand = "Honda";

console.log(car.brand);

A. Toyota

B. Honda

C. Error

D. undefined

✅ Answer

Explanation:

Even though car is const, its properties can still change.

MCQ 6

What prints?

const user = {
  address: {
    city: "Mumbai"
  }
};

console.log(user.address.city);

A. Mumbai

B. address

C. undefined

D. Error

✅ Answer

Explanation:

Objects can contain other objects (nested objects).

MCQ 7

Output?

const user = {
  address: {
    city: "Mumbai"
  }
};

console.log(user.city);

A. Mumbai

B. undefined

C. Error

D. address

✅ Answer

Explanation:

city is inside address.

Correct:

user.address.city

MCQ 8

Which is better?

user["name"]

user.name

(You already know the property name.)

✅ Answer

Explanation:

Dot notation is shorter and easier to read.

MCQ 9

Predict the output.

const key = "age";

const user = {
  age: 22
};

console.log(user[key]);

A. age

B. 22

C. undefined

D. Error

✅ Answer

Explanation:

Bracket notation lets you use variables as property names.

MCQ 10

Which one must use bracket notation?

user.name

user["name"]

user[key]

user.age

✅ Answer

Explanation:

When the property name is stored in a variable, use brackets.

MCQ 11

Output?

const user = {
  age: 25
};

const copy = user;

copy.age = 30;

console.log(user.age);

A. 25

B. 30

C. undefined

D. Error

✅ Answer

Explanation:

Objects are assigned by reference.

Both variables point to the same object.

MCQ 12

Which creates a shallow copy?

const copy = user;

const copy = { ...user };

const copy = user.copy();

const copy = clone(user);

✅ Answer

Explanation:

The spread operator copies the top-level properties into a new object.

MCQ 13

Predict the output.

const user = {
  name: "Sam"
};

const copy = { ...user };

copy.name = "Tom";

console.log(user.name);

A. Sam

B. Tom

C. undefined

D. Error

✅ Answer

Explanation:

The spread operator created a new object.

Changing copy doesn't affect user.

MCQ 14

Output?

const user = {};

console.log(user.address?.city);

A. Error

B. undefined

C. null

D. city

✅ Answer

Explanation:

?. is optional chaining.

If address doesn't exist, JavaScript safely returns undefined instead of throwing an error.

MCQ 15

Output?

const user = {};

console.log(user.address.city);

A. undefined

B. Error

C. null

D. city

✅ Answer

Explanation:

address is undefined, so accessing .city causes an error.

MCQ 16

Predict the output.

const user = {};

console.log(user.name ?? "Guest");

A. Guest

B. undefined

C. null

D. Error

✅ Answer

Explanation:

?? (nullish coalescing) uses the value on the right only when the left side is null or undefined.

MCQ 17

Output?

const user = {
  name: "Alice",
  age: 22
};

console.log(Object.keys(user));

["Alice", 22]

["name", "age"]

{name, age}

D. Error

✅ Answer

Explanation:

Object.keys() returns an array of property names.

MCQ 18

Output?

const user = {
  name: "Alice",
  age: 22
};

console.log(Object.values(user));

["Alice", 22]

["name", "age"]

{Alice,22}

D. Error

✅ Answer

Explanation:

Object.values() returns all property values.

MCQ 19

Output?

const user = {
  name: "Alice",
  age: 22
};

console.log(Object.entries(user));

[
  ["name", "Alice"],
  ["age", 22]
]

["name","age"]

["Alice",22]

D. Error

✅ Answer

Explanation:

Each entry is a [key, value] pair.

MCQ 20 (Hard)

Predict the output.

const user = {
  profile: {
    name: "John"
  }
};

const copy = { ...user };

copy.profile.name = "David";

console.log(user.profile.name);

A. John

B. David

C. undefined

D. Error

✅ Answer

Explanation:

This is a very common interview question.

{ ...user } makes only a shallow copy.

The nested profile object is still shared.

Think of it like copying a folder but leaving the files inside as shared references.

Common Beginner Mistakes

❌ Thinking const makes an object completely immutable.

❌ Forgetting objects are copied by reference.

❌ Using dot notation when the property name is stored in a variable.

❌ Forgetting ?. and causing runtime errors.

❌ Assuming the spread operator deep-copies nested objects.

Mini Coding Challenge

Question

Predict the output.

const student = {
  name: "Emma",
  marks: {
    math: 90
  }
};

const copy = { ...student };

copy.name = "Sophia";
copy.marks.math = 100;

console.log(student.name);
console.log(student.marks.math);
console.log(copy.name);
console.log(copy.marks.math);

Pause and think before checking the answer.

✅ Answer

Output:

Emma
100
Sophia
100

Why?

copy.name = "Sophia" changes only the copied object's top-level name, because { ...student } created a new top-level object.
marks is a nested object. Both student.marks and copy.marks still point to the same object, so changing copy.marks.math also changes student.marks.math.

Mini Project — User Profile Manager

Problem

Create the following object:

const user = {
  name: "Alice",
  age: 25,
  address: {
    city: "Delhi",
    country: "India"
  }
};

Then:

Print the user's name.
Print the city.
Change the age to 26.
Add a new property isAdmin with the value false.
Print all keys using Object.keys().
Print all values using Object.values().
Safely print user.company?.name.
Print "No company" if company doesn't exist using ??.

✅ One Possible Solution

const user = {
  name: "Alice",
  age: 25,
  address: {
    city: "Delhi",
    country: "India"
  }
};

// 1
console.log(user.name);

// 2
console.log(user.address.city);

// 3
user.age = 26;

// 4
user.isAdmin = false;

// 5
console.log(Object.keys(user));

// 6
console.log(Object.values(user));

// 7
console.log(user.company?.name);

// 8
console.log(user.company?.name ?? "No company");

Expected Output

Alice
Delhi

["name", "age", "address", "isAdmin"]

[
  "Alice",
  26,
  { city: "Delhi", country: "India" },
  false
]

undefined
No company

🎯 Chapter 13 Takeaways (The 20% That Gives You 80%)

If you remember only these, you'll be in great shape:

Use dot notation (user.name) when the property name is known.
Use bracket notation (user[key]) when the property name comes from a variable.
Objects are assigned by reference (const copy = user).
The spread operator ({ ...obj }) creates only a shallow copy, not a deep copy.
Use optional chaining (?.) to safely access nested properties.
Use nullish coalescing (??) to provide default values only when the left side is null or undefined.
Object.keys(), Object.values(), and Object.entries() are used constantly when working with objects in real projects.

These patterns appear frequently in React components, API responses, and state management.