Accessing object properties in Javascript - Step-by-Step Execution

Concept Flow - Accessing object properties

Start with object

↓

Choose property name

↓

Use dot notation or bracket notation

↓

Retrieve property value

↓

Use or display value

↓

End

This flow shows how to get a value from an object by picking a property name and using dot or bracket notation.

Execution Sample

Javascript

const person = { name: 'Anna', age: 30 };
console.log(person.name);
console.log(person['age']);

This code gets the 'name' and 'age' properties from the person object and prints them.

Execution Table

Step	Code Line	Action	Property Accessed	Value Retrieved	Output
1	const person = { name: 'Anna', age: 30 };	Create object person	-	-	-
2	console.log(person.name);	Access property 'name' using dot notation	name	Anna	Anna
3	console.log(person['age']);	Access property 'age' using bracket notation	age	30	30
4	-	End of code	-	-	-

💡 All properties accessed and printed, program ends.

Variable Tracker

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

Key Moments - 2 Insights

Why can we use both dot notation and bracket notation to access properties?

Dot notation is simple and works with fixed property names like 'name'. Bracket notation lets you use strings or variables as property names, like person['age']. See steps 2 and 3 in the execution_table.

What happens if we try to access a property that does not exist?

JavaScript returns undefined if the property is missing. This is not shown here but would appear as 'undefined' in the output.

Visual Quiz - 3 Questions

Look at the execution table, what value is retrieved at step 2?

A 30

B undefined

C Anna

D person

💡 Hint

Check the 'Value Retrieved' column for step 2 in the execution_table.

At which step is the 'age' property accessed?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the 'Property Accessed' column in the execution_table.

If we change person['age'] to person['height'], what will be the output at step 3?

A undefined

B Error

C The value of height property

D 30

💡 Hint

If the property does not exist, JavaScript returns undefined.

Concept Snapshot

Access object properties using dot notation (obj.prop) or bracket notation (obj['prop']).
Dot notation is simpler but only works with fixed names.
Bracket notation allows dynamic property names.
If property missing, value is undefined.
Use console.log to see property values.

Full Transcript

This lesson shows how to get values from an object in JavaScript. We start with an object named person that has properties name and age. We access the name property using dot notation: person.name. Then we access the age property using bracket notation: person['age']. Both ways get the value stored in the object. The program prints Anna and 30. If you try to get a property that does not exist, JavaScript returns undefined. Dot notation is easy for fixed property names. Bracket notation is useful when the property name is stored in a variable or is not a valid identifier. This visual trace helps you see each step and the values involved.