【JavaScript】ドット記法とブラケット記法について

ドット記法とブラケット記法の違い

オブジェクトのプロパティの値を取得したり変更したりするために使うドット記法とブラケット記法は、使い方にどんな違いがあるんでしょうか？

ドット記法　
オブジェクト名.プロパティ名

ブラケット記法
オブジェクト名['プロパティ名']
オブジェクト名["プロパティ名"]
引用符の「シングル・ダブルクォーテーション」どちらでもOK
プロパティ名は文字列で指定する必要がある

	ドット記法	ブラケット記法
プロパティ名を変数に使用	できない	できる
プロパティ名に制限	ある	ない

ドット記法

const obj = {
  name: 'Taro Yamada',
  age: 18,
};

console.log(obj.name); //　Taro Yamada

// プロパティ名に変数を使用しようとすると...
const prop = 'name'; 
console.log(obj.prop); // undefined 

ドット記法では、プロパティ名に引用符をつけない。
→　プロパティ名なのか、定数名なのか、区別できない。
→　プロパティ名に変数を使用しようとすると見つからないため、undefinedが返される。

ブラケット記法

const obj = {
  name: 'Taro Yamada',
  age: 18,
};

console.log(obj['name']);
//　Taro Yamada

// プロパティ名に変数を使用しようとすると...
const prop = 'name';
console.log(obj[prop]); //　Taro Yamada

// 直感的にわからない人は、変数名prop部分にそのまま代入してみると...
// console.log(person['name']); →　Taro Yamada

ブラケット記法で、引用符をつける場合
→ プロパティ名が文字列として扱われる。
ブラケット記法で、引用符をつけない場合
→ プロパティ名ではなく変数名であると判断される。

ブラケット記法は、動的にプロパティ名を変更したい時に便利。　

ブラケット記法のその他の使い方

関数の引数から使う

const person = {
  name: ["Taro", "Yamada"],
  age: 20,
};

function hoge(prop) {
  console.log(person[prop]);
}

hoge("name");
// ["Taro", "Yamada"]
hoge("age");
// 20

要素をループで処理（forEachの場合）

const foods = {
  hamburger: 200,
  potato: 150,
  cola: 100,
};

const foodsKey = Object.keys(foods);
// const foodsKey = ['hamburger', 'potato', 'cola'];　とするよりタイプミス防止、保守性が向上

foodsKey.forEach((key) => {
  console.log(`${key}は${foods[key]}円です`);
});
// hamburgerは200円です
// potatoは150円です
// colaは100円です

要素をループで処理（for...inの場合）

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for(let key in user) {
  console.log(user[key]); 
}
// "John"
// 30
// true

ブラケットの中で文字列を整形し、その文字列をプロパティ名にする

const brothers = {
  personA: 'Mario',
  personB: 'Luigi',
};

const keyBase = 'person';

console.log(brothers[keyBase + 'A']); // 文字列が結合されて、personAになる
// Mario

console.log(brothers[keyBase + 'B']); // 文字列が結合されて、personBになる
// Luigi

//　　正しく結合するために、変数ではないA,Bはブラケットの中で引用符''をつけないと、undefinedエラーになる。

特殊文字を使う

const obj = {
  'first-name': 'Minami',
  'midle_name': 'Amy'
  'last name': 'Tanaka',
  '1name': 'Minami',
};

// ブラケット記法を使う場合 制限なし
console.log(obj['first-name']); // Minami
console.log(obj['midle_name']); // Amy
console.log(obj['last name']); // Tanaka
console.log(obj['1name']); // Minami
//obj['first-name']は、obj["first-name"] でもよい

// ドット記法を使う場合　制限あり
console.log(obj.first-name); //SyntaxError になる ハイフン使用は不可
console.log(obj.middle_name); // Amy
console.log(obj.last name); // SyntaxError になる　　スペース使用は不可
console.log(obj.1name); // SyntaxError になる　　数字から始めるのは不可

オブジェクトのプロパティ名を動的に扱う（Computed Property Names）

const lastName = 'Yamada';
const obj = {
  [firstName]: lastName
};

オブジェクトのプロパティ名を動的に扱う（Computed Property Names）パターン1

const lastName = 'Yamada';
const firstName = 'Taro'; //firstNameが 'Taro' であれば
const obj = {
  [firstName]: lastName
};
console.log(obj); //　{ Taro: 'Yamada' }

オブジェクトのプロパティ名を動的に扱う（Computed Property Names）パターン2

const lastName = 'Yamada';
const firstName = 'Jiro'; // firstNameが 'Jiro' であれば
const obj = {
  [firstName]: lastName
};

console.log(obj); //　{ Jiro: 'Yamada' }

参考

オブジェクト｜文系大学生のためのJavaScript入門
【JavaScript】「ドット記法」と「ブラケット記法」の違い
JavaScript オブジェクトの基本 - ウェブ開発を学ぶ | MDN
オブジェクト · JavaScript Primer #jsprimer