Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ Accessing Object Properties in JavaScript | Section
JavaScript Basics for React and Next.js

bookAccessing Object Properties in JavaScript

メニューを表示するにはスワイプしてください

We will explore two methods for accessing object properties: dot notation and square brackets. These methods allow you to retrieve specific values from objects, and we'll discuss scenarios in which each method is commonly used.

Dot Notation to Access Properties

Dot notation is the primary and simplest method for accessing properties. You refer to the object, add a dot, and specify the property name.

1234567891011
const employee = { companyName: "Schuster, Mertz and Marks", name: "Miss Alma Boyer", address: "2277 Karine Plains", workedYears: 4, remote: false, }; console.log(employee.name); // Output: Miss Alma Boyer console.log(employee.address); // Output: 2277 Karine Plains console.log(employee.lastName); // Output: undefined
copy
Note
Note
  • If you attempt to access a property that does not exist, JavaScript will return undefined;
  • undefined is not outputted when you run the code.

Accessing Properties Through Square Brackets

Square brackets are used when the property name is not known in advance, or when it contains spaces or special characters, or when it is stored in a variable.

1234567891011
const employee = { companyName: "Schuster, Mertz and Marks", name: "Miss Alma Boyer", address: "2277 Karine Plains", workedYears: 4, remote: false, }; console.log(employee["name"]); // Output: Miss Alma Boyer console.log(employee["address"]); // Output: 2277 Karine Plains console.log(employee["lastName"]); // Output: undefined
copy

This method provides the property name as a string within square brackets. It allows for dynamic property access, which can be helpful when dealing with more complex data.

Accessing Nested Properties

Objects often contain other objects. Using dot notation, you can access deeply nested values by chaining property names.

1234567891011121314151617
const course = { courseName: "Applied Science", courseDuration: "48 hours", author: { position: "Nuclear Physicist", age: 43, name: { first: "Mattie", last: "Crooks", }, }, }; console.log(course.author.position); // Output: Nuclear Physicist console.log(course.author.age); // Output: 43 console.log(course.author.name.first); // Output: Mattie console.log(course.author.name.last); // Output: Crooks
copy

In this example, we access properties at different levels of nesting within the product object.

1. What are the methods for accessing object properties?

2. When using dot notation to access object properties, what is returned if you try to access a property that does not exist?

3. Consider the following complex object representing a person's contact information. How could you retrieve the postal code from the person object? Select all possible options.

question mark

What are the methods for accessing object properties?

すべての正しい答えを選択

question mark

When using dot notation to access object properties, what is returned if you try to access a property that does not exist?

正しい答えを選んでください

question mark

Consider the following complex object representing a person's contact information. How could you retrieve the postal code from the person object? Select all possible options.

すべての正しい答えを選択

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 1.  21

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 1.  21
some-alt