Nested objects in Javascript - Step-by-Step Execution

Concept Flow - Nested objects

Start

↓

Create outer object

↓

Add inner object as property

↓

Access or modify inner object property

↓

Use nested values

↓

End

This flow shows how we create an object that contains another object inside it, then access or change the inner object's properties.

Execution Sample

Javascript

const person = {
  name: "Alice",
  address: {
    city: "Wonderland",
    zip: 12345
  }
};
console.log(person.address.city);

This code creates a person object with a nested address object, then prints the city inside the address.

Execution Table

Step	Action	Object State	Output
1	Create person object with name and address properties	{"name":"Alice","address":{"city":"Wonderland","zip":12345}}
2	Access person.address.city	{"name":"Alice","address":{"city":"Wonderland","zip":12345}}	"Wonderland"
3	Print city value	{"name":"Alice","address":{"city":"Wonderland","zip":12345}}	Wonderland
4	End of code execution	{"name":"Alice","address":{"city":"Wonderland","zip":12345}}

💡 Code ends after printing the nested city value.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
person	undefined	{"name":"Alice","address":{"city":"Wonderland","zip":12345}}	{"name":"Alice","address":{"city":"Wonderland","zip":12345}}	{"name":"Alice","address":{"city":"Wonderland","zip":12345}}
person.address.city	undefined	"Wonderland"	"Wonderland"	"Wonderland"

Key Moments - 2 Insights

Why do we write person.address.city instead of just person.city?

Because city is inside the nested address object, not directly inside person. See execution_table step 2 where we access person.address.city.

Can we change the city value directly inside the nested object?

Yes, by assigning a new value to person.address.city. The nested object is just like any other object property. This is implied by the structure in execution_table step 1.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the value of person.address.city?

A 12345

B "Alice"

C "Wonderland"

D undefined

💡 Hint

Check the Output column at step 2 in the execution_table.

At which step does the code print the city name?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look for the step where Output shows the printed value.

If we add a new property person.address.street, where would it appear in variable_tracker?

A As a new variable row with initial undefined and updated values

B Inside person variable only

C It would not appear in variable_tracker

D As a new top-level variable

💡 Hint

Nested properties are tracked separately as seen with person.address.city in variable_tracker.

Concept Snapshot

Nested objects store objects inside other objects.
Access nested properties with dot notation: outer.inner.property.
You can read or change nested values like normal properties.
Useful for grouping related data inside one object.
Example: person.address.city accesses city inside address.

Full Transcript

We start by creating an object named person. This object has two properties: name and address. The address itself is another object with city and zip properties. When we access person.address.city, we go inside the person object to the address object, then get the city value. The code prints 'Wonderland' which is the city inside the nested address object. This shows how nested objects let us organize data inside other data. We can read or change nested properties using dot notation step by step.