JavaScriptオブジェクトのプロパティへのアクセス方法

概要

JavaScriptオブジェクトについてのまとめ
参考：https://jsprimer.net/basic/object/

オブジェクトとは

オブジェクトはプロパティの集合です。プロパティとは名前（キー）と値（バリュー）が対になったものです。 プロパティのキーには文字列またはSymbolが利用でき、値には任意のデータを指定できます。 また、1つのオブジェクトは複数のプロパティを持てるため、1つのオブジェクトで多種多様な値を表現できます。

こういうやつ

const obj = {
  hoge:'huga',
  foo:'bar'
};

プロパティへのアクセス方法

オブジェクトはプロパティの集合なので、プロパティにアクセスしましょう。
アクセス方法は以下の2通りです

ドット記法

オブジェクトに対してドットで繋げる記法。
ドット記法では、変数名と同じく識別子の命名規則を満たす必要がある。
具体的には以下の通り。

const obj = {
  hoge:'huga',
  123:456,
 'my-house':'house'
};

console.log(obj.hoge);       // OK 
console.log(obj.123);        // NG (数字から始まっているため)
console.log(obj.my-house);   // NG (ハイフンを含んでいるため)

ブラケット記法

[] の間に任意の式を書く。
プロパティ名は文字列へと暗黙的に変換される。
具体的には以下の通り

const obj = {
  hoge:'huga',
  123:456,
 'my-house':'house'
};
const is_hoge = 'hoge';

console.log(obj['hoge']);       // 'huga'
console.log(obj[123]);          // 456
console.log(obj['my-house']);   // 'house'
console.log(obj[is_hoge]);      // 'huga'

オブジェクトと分割代入

何度もプロパティを指定するのはめんどくさいので、プロパティを変数として定義できる。

const obj = {
  hoge:'huga',
  number:456,
  house:'house'
};
const a = obj.hoge;
const b = obj.number;
const c = obj.house;

console.log(a)    // 'huga' 
console.log(b)  // 456
console.log(c)   // 'house'

上記のように変数にプロパティを代入する場合は、分割代入を使用すると短く書ける。

const obj = {
  hoge:'huga',
  number:456,
  house:'house'
};
const {hoge, number, house} = obj;

console.log(hoge)    // 'huga' 
console.log(number)  // 456
console.log(house)   // 'house'

プロパティ名と変数名が一致していないとできないので注意です。