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.

Practice

1. Which of the following is the correct way to create an object with a key name and value "Alice"?

easy

A. const obj = { name: "Alice" };

B. const obj = (name = "Alice");

C. const obj = [name: "Alice"];

D. const obj = name => "Alice";

Solution

1. Step 1: Understand object literal syntax

   Objects in JavaScript are created using curly braces with key-value pairs inside, like { key: value }.

2. Step 2: Identify the correct syntax for key-value pair

   The key name and value "Alice" should be inside curly braces separated by a colon.

3. Final Answer:

   const obj = { name: "Alice" }; -> Option A

4. Quick Check:

   Object literal = curly braces with key: value [OK]

Hint: Objects use curly braces with key: value pairs [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Using array brackets for objects
• Confusing arrow functions with object creation

2. Which of the following is the correct syntax to create an empty object in JavaScript?

easy

A. const obj = {};

B. const obj = ();

C. const obj = [];

D. const obj = new Object[];

Solution

1. Step 1: Recall empty object syntax

   An empty object is created using empty curly braces {}.

2. Step 2: Check each option

   const obj = {}; uses {}, which is the correct syntax. Others use parentheses, array brackets, or invalid syntax.

3. Final Answer:

   const obj = {}; -> Option A

4. Quick Check:

   Empty object = {} [OK]

Hint: Empty objects use just curly braces {} [OK]

Common Mistakes:

• Using parentheses instead of curly braces
• Using array brackets for objects
• Trying to use new Object[] which is invalid

3. What will be the output of the following code?

const person = { name: "Bob", age: 30 };
console.log(person.name);

medium

A. Error

B. 30

C. "Bob"

D. undefined

Solution

1. Step 1: Understand object property access

   Using dot notation person.name accesses the value of the key name in the object.

2. Step 2: Identify the value of name

   The value of name is the string "Bob".

3. Final Answer:

   "Bob" -> Option C

4. Quick Check:

   person.name = "Bob" [OK]

Hint: Dot notation gets value by key name [OK]

Common Mistakes:

• Confusing key name with value
• Using brackets without quotes incorrectly
• Expecting age instead of name

4. Find the error in the following code that tries to create an object:

const car = { brand = "Toyota", year: 2020 };

medium

A. Missing semicolon after object

B. Using = instead of : for the key brand

C. Using const instead of let

D. year value should be a string

Solution

1. Step 1: Check object key-value syntax

   In objects, keys and values are separated by a colon :, not an equals sign =.

2. Step 2: Identify the incorrect part

   The code uses brand = "Toyota" which is invalid syntax for object properties.

3. Final Answer:

   Using = instead of : for the key brand -> Option B

4. Quick Check:

   Object key-value separator = colon : [OK]

Hint: Use colon : between key and value in objects [OK]

Common Mistakes:

• Using = instead of : in object literals
• Thinking semicolon is mandatory inside object
• Confusing variable declaration keywords

5. You want to create an object student with keys name, age, and grades (an array). Which code correctly creates this object?

hard

A. const student = [ name: "Eva", age: 22, grades: [90, 85, 88] ];

B. const student = { "name" = "Eva", "age" = 22, "grades" = [90, 85, 88] };

C. const student = { name: "Eva", age: "22", grades: "90, 85, 88" };

D. const student = { name: "Eva", age: 22, grades: [90, 85, 88] };

Solution

1. Step 1: Verify object literal syntax with multiple keys

   Objects use curly braces with keys and values separated by colons, and multiple pairs separated by commas.

2. Step 2: Check each option for correct syntax and data types

   const student = { name: "Eva", age: 22, grades: [90, 85, 88] }; correctly uses colons and commas, and grades is an array. const student = { "name" = "Eva", "age" = 22, "grades" = [90, 85, 88] }; uses equals signs which is wrong. const student = [ name: "Eva", age: 22, grades: [90, 85, 88] ]; uses array brackets instead of curly braces. const student = { name: "Eva", age: "22", grades: "90, 85, 88" }; uses a string for grades instead of an array.

3. Final Answer:

   const student = { name: "Eva", age: 22, grades: [90, 85, 88] }; -> Option D

4. Quick Check:

   Object with array value uses colon and brackets [OK]

Hint: Use colons for keys and arrays inside objects with brackets [OK]

Common Mistakes:

• Using = instead of : for keys
• Using arrays brackets instead of curly braces for objects
• Putting arrays as strings instead of actual arrays