学ぶ JavaScriptにおけるオブジェクトプロパティへのアクセス

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

オブジェクトのプロパティへアクセスする2つの方法、ドット記法と角括弧記法について解説します。これらの方法を使うことで、オブジェクトから特定の値を取得できます。それぞれの方法が一般的に使用される場面についても説明します。

プロパティへのアクセスにおけるドット記法

ドット記法は、プロパティへアクセスするための基本的かつ最も簡単な方法です。オブジェクト名の後にドットを付け、プロパティ名を指定します。


              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

注意

存在しないプロパティにアクセスしようとすると、JavaScriptはundefinedを返します。
コードを実行してもundefinedは出力されません。

角括弧によるプロパティアクセス

プロパティ名が事前に分からない場合や、スペースや特殊文字を含む場合、または変数に格納されている場合に角括弧が使用されます。


              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

この方法では、プロパティ名を角括弧内の文字列として指定します。より複雑なデータを扱う際に役立つ、動的なプロパティアクセスが可能です。

ネストされたプロパティへのアクセス

オブジェクトは他のオブジェクトを含むことがよくあります。ドット記法を使用することで、プロパティ名を連結して深くネストされた値にアクセスできます。


              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