Object creation in Javascript - Step-by-Step Execution

Concept Flow - Object creation

Start

↓

Define object using {}

↓

Add properties and values

↓

Use object in code

↓

Access or modify properties

↓

End

This flow shows how an object is created, properties are added, and then accessed or changed.

Execution Sample

Javascript

const person = { name: 'Anna', age: 25 };
console.log(person.name);
person.age = 26;
console.log(person.age);

Creates an object 'person' with name and age, prints name, updates age, then prints new age.

Execution Table

Step	Action	Object State	Output
1	Create object person with properties name='Anna', age=25	{ name: 'Anna', age: 25 }
2	Access person.name	{ name: 'Anna', age: 25 }	Anna
3	Update person.age to 26	{ name: 'Anna', age: 26 }
4	Access person.age	{ name: 'Anna', age: 26 }	26

💡 All steps completed, object created and properties accessed/modified.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
person	undefined	{ name: 'Anna', age: 25 }	{ name: 'Anna', age: 26 }	{ name: 'Anna', age: 26 }

Key Moments - 2 Insights

Why does person.name print 'Anna' but person.age changes from 25 to 26?

At step 2, person.name is accessed and prints 'Anna' as set initially. At step 3, person.age is updated to 26, changing the object state, so step 4 prints the new value 26.

Is the object person recreated when we change person.age?

No, the object is not recreated. Only the property age inside the existing object is updated, as shown by the same object reference in the variable_tracker.

Visual Quiz - 3 Questions

Look at the execution table, what is the output at step 2?

A 25

B Anna

C undefined

D 26

💡 Hint

Check the Output column at step 2 in the execution_table.

At which step does the person.age property change?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the Action and Object State columns in the execution_table.

If we add a new property person.city = 'NY', what happens to the object state?

A The existing object now includes city: 'NY'

B A new object is created

C The object is deleted

D The object properties remain unchanged

💡 Hint

Refer to how properties are added or changed in the variable_tracker and execution_table.

Concept Snapshot

Object creation in JavaScript:
- Use curly braces {} to create an object.
- Add properties as key: value pairs.
- Access properties with dot notation (obj.key).
- Modify properties by assigning new values.
- Objects hold data as named properties.

Full Transcript

This visual trace shows how to create a JavaScript object named person with properties name and age. First, the object is created with name 'Anna' and age 25. Then, accessing person.name prints 'Anna'. Next, the age property is updated to 26. Finally, accessing person.age prints the updated value 26. The object itself is not recreated when properties change; only the property values update. This helps beginners see how objects store and change data step-by-step.