Accessing object properties in Javascript - Mini Project: Build & Apply

Accessing object properties

📖 Scenario: You are working on a simple app that stores information about a book. You want to get details like the book's title and author from an object.

🎯 Goal: Learn how to access properties of a JavaScript object using dot notation.

📋 What You'll Learn

Create an object with specific properties

Create a variable to hold a property name

Access object properties using dot notation

Print the accessed property values

💡 Why This Matters

🌍 Real World

Accessing object properties is a basic skill needed to work with data in JavaScript apps, such as user profiles, product details, or settings.

💼 Career

Many programming jobs require working with objects and accessing their properties to manipulate and display data correctly.

1

Create a book object

Create an object called book with these exact properties and values: title set to 'The Great Gatsby', author set to 'F. Scott Fitzgerald', and year set to 1925.

Javascript

// Your code here

Hint

Use curly braces {} to create an object and separate properties with commas.

2

Create a variable for the property name

Create a variable called propertyName and set it to the string 'author'.

Javascript

const book = {
  title: 'The Great Gatsby',
  author: 'F. Scott Fitzgerald',
  year: 1925
};

// Your code here

Hint

Use const to create a variable and assign the string 'author' to it.

3

Access the author property using dot notation

Create a variable called authorName and set it to the value of the author property of the book object using dot notation.

Javascript

const book = {
  title: 'The Great Gatsby',
  author: 'F. Scott Fitzgerald',
  year: 1925
};

const propertyName = 'author';

// Your code here

Hint

Use dot notation like object.property to get the value.

4

Print the author name

Write a console.log statement to print the value of authorName.

Javascript

const book = {
  title: 'The Great Gatsby',
  author: 'F. Scott Fitzgerald',
  year: 1925
};

const propertyName = 'author';

const authorName = book.author;

// Your code here

Hint

Use console.log(authorName); to print the value.

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