Accessing object properties in Javascript

Introduction

We use object properties to store and get information about things. Accessing these properties lets us read or change that information easily.

When you want to get the name or age of a person stored in an object.

When you need to update the price of a product in a shopping cart object.

When you want to check the status of a task in a to-do list object.

When you want to read settings like theme or language from a configuration object.

Syntax

Javascript

objectName.propertyName

// or

objectName["propertyName"]

You can use dot notation (objectName.propertyName) when you know the exact property name.

Use bracket notation (objectName["propertyName"]) when the property name is stored in a variable or has spaces/special characters.

Examples

Access the name property using dot notation.

Javascript

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

Access the age property using bracket notation.

Javascript

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

Use a variable key with bracket notation to access a property.

Javascript

const key = "name";
const person = { name: "Alice", age: 30 };
console.log(person[key]);

Sample Program

This program shows three ways to access properties of the car object. It prints the brand, model, and year.

Javascript

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2022
};

console.log(car.brand);       // Using dot notation
console.log(car["model"]);  // Using bracket notation

const prop = "year";
console.log(car[prop]);       // Using variable with bracket notation

Important Notes

If you try to access a property that does not exist, JavaScript returns undefined.

Bracket notation is useful when property names have spaces or special characters, like object["full name"].

Summary

Use dot notation for simple, known property names.

Use bracket notation when property names are dynamic or have special characters.

Accessing properties lets you read or change information stored in objects.

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