Accessing object properties in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are the two main ways to access properties of a JavaScript object?

You can access properties using dot notation (e.g., obj.property) or bracket notation (e.g., obj['property']).

beginner

How do you access a property with a name stored in a variable?

Use bracket notation with the variable inside the brackets, like obj[varName]. Dot notation won't work because it expects a literal property name.

beginner

What happens if you try to access a property that does not exist on an object?

JavaScript returns undefined if the property is not found on the object.

intermediate

Can you use bracket notation to access properties with spaces or special characters in their names?

Yes, bracket notation allows accessing properties with spaces or special characters, like obj['property name'].

intermediate

Why might you choose bracket notation over dot notation?

Bracket notation is useful when property names are dynamic, contain spaces, special characters, or are numbers. Dot notation only works with valid identifier names.

Which syntax correctly accesses the property 'name' of an object 'person'?

A person.name

B person->name

C person['name']

D Both A and C

Both dot notation (person.name) and bracket notation (person['name']) correctly access the 'name' property.

How do you access a property when the property name is stored in a variable 'key'?

A object[key]

B object.key

C object.'key'

D object->key

Bracket notation with the variable (object[key]) accesses the property named by the variable's value.

What is the result of accessing a non-existing property on an object?

A undefined

B null

C 0

D Error

Accessing a property that does not exist returns undefined in JavaScript.

Which notation allows accessing properties with spaces in their names?

A Dot notation

B Both dot and bracket notation

C Bracket notation

D None

Bracket notation allows accessing properties with spaces or special characters, e.g., obj['property name'].

Why might dot notation fail to access some properties?

A If the property name is a number

B All of the above

C If the property name is stored in a variable

D If the property name contains spaces or special characters

Dot notation only works with valid identifier names; it fails if the property name is a number, contains spaces/special characters, or is dynamic.

Explain how to access object properties in JavaScript using both dot and bracket notation. When would you use each?

Think about when property names are fixed vs dynamic or unusual.

What happens if you try to access a property that does not exist on an object? How can you safely check if a property exists?

Consider how JavaScript handles missing properties and how to avoid errors.

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