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.

Practice

1. Which notation is used to access a property named age in a JavaScript object person when the property name is known and simple?

easy

A. person->age

B. person.age

C. person['age']

D. person(age)

Solution

1. Step 1: Understand dot notation usage

   Dot notation is used when the property name is a simple, valid identifier known in advance.

2. Step 2: Apply dot notation to access property

   Using person.age accesses the age property directly.

3. Final Answer:

   person.age -> Option B

4. Quick Check:

   Dot notation = person.age [OK]

Hint: Use dot notation for simple known property names [OK]

Common Mistakes:

• Using arrow (->) instead of dot
• Using parentheses like a function call
• Using bracket notation unnecessarily

2. Which of the following is the correct syntax to access the property "first-name" of an object user?

easy

A. user['first-name']

B. user.first-name

C. user.first_name

D. user[first-name]

Solution

1. Step 1: Identify property name with special characters

   The property name "first-name" contains a hyphen, which is not valid for dot notation.

2. Step 2: Use bracket notation with quotes

   Bracket notation with quotes, user['first-name'], correctly accesses such properties.

3. Final Answer:

   user['first-name'] -> Option A

4. Quick Check:

   Bracket notation for special chars = user['first-name'] [OK]

Hint: Use bracket notation for property names with special characters [OK]

Common Mistakes:

• Using dot notation with hyphenated names
• Omitting quotes inside brackets
• Using undefined variable inside brackets

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

const car = { brand: 'Toyota', year: 2020 };
console.log(car['brand']);

medium

A. Error

B. brand

C. undefined

D. Toyota

Solution

1. Step 1: Understand bracket notation access

   The code uses bracket notation with the string 'brand' to access the property value.

2. Step 2: Retrieve the value of 'brand'

   The value of car['brand'] is 'Toyota', so it prints 'Toyota'.

3. Final Answer:

   Toyota -> Option D

4. Quick Check:

   car['brand'] = 'Toyota' [OK]

Hint: Bracket notation with string key returns property value [OK]

Common Mistakes:

• Confusing property name with value
• Expecting property name to print
• Using wrong quotes causing error

4. Identify the error in the following code snippet:

const book = { title: '1984', author: 'Orwell' };
console.log(book[title]);

medium

A. Syntax error due to missing semicolon

B. Dot notation should be used instead

C. Missing quotes around 'title' in bracket notation

D. Property 'title' does not exist

Solution

1. Step 1: Check bracket notation usage

   Inside brackets, property names must be strings or variables. Here, title is treated as a variable, not a string.

2. Step 2: Fix by adding quotes

   Adding quotes: book['title'] correctly accesses the property.

3. Final Answer:

   Missing quotes around 'title' in bracket notation -> Option C

4. Quick Check:

   Bracket keys need quotes if not variables [OK]

Hint: Put quotes around property names in brackets unless variable [OK]

Common Mistakes:

• Forgetting quotes around string keys
• Assuming dot notation always required
• Confusing variable and string keys

5. Given the object settings = { 'theme-color': 'dark', fontSize: 14 }, which code correctly changes the theme-color to 'light' and increases fontSize by 2?

hard

A. settings['theme-color'] = 'light'; settings.fontSize += 2;

B. settings.theme-color = 'light'; settings['fontSize'] += 2;

C. settings.theme-color = 'light'; settings.fontSize = settings.fontSize + 2;

D. settings['theme-color'] = 'light'; settings['fontSize'] =+ 2;

Solution

1. Step 1: Update 'theme-color' using bracket notation

   Since 'theme-color' has a hyphen, use bracket notation: settings['theme-color'] = 'light';

2. Step 2: Increase fontSize using dot notation

   fontSize is a simple property, so settings.fontSize += 2; correctly adds 2.

3. Final Answer:

   settings['theme-color'] = 'light'; settings.fontSize += 2; -> Option A

4. Quick Check:

   Bracket for special keys + dot for simple keys [OK]

Hint: Use bracket for special keys, dot for simple keys [OK]

Common Mistakes:

• Using dot notation for hyphenated keys
• Mistyping += as =+
• Mixing up property names and strings