【JavaScript】「ドット記法」と「ブラケット記法」の違い

ドット記法とブラケット記法はオブジェクトのプロパティにアクセスする記法です。

この記事では、ドット記法とブラケット記法について、

  • ドット記法の使い方
  • ブラケット記法の使い方
  • ドット記法とブラケット記法の「違い」と「使い分け」

などをサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

ドット記法の使い方

ドット記法は、ドット(.)を使ってプロパティにアクセスする記法です。

オブジェクトとプロパティをドット(.)で繋げることで、オブジェクトの値の取得や変更ができます。

構文を以下に示します。

オブジェクト名.プロパティ名

サンプルコードを以下に示します。

const obj = {
  name: { first: 'Taro', last: 'Yamada' }, // objオブジェクトのnameプロパティにオブジェクトを設定
  age: 18,
  hello: function () {
    console.log('Hello');
  },
};

// 値の取得
console.log(obj.age); // ageプロパティの値を取得
console.log(obj.name.first); // nameプロパティに設定されたオブジェクトのfirstプロパティの値を取得
console.log(obj.name.last); // nameプロパティに設定されたオブジェクトのlastプロパティの値を取得

// 値の変更
obj.age = 35; // ageプロパティの値の変更
obj.name.last = 'Suzuki'; // nameプロパティに設定されたオブジェクトのlastプロパティの値の変更

// 値の追加
obj.gender = 'male'; // objオブジェクトにgenderプロパティとその値を追加
obj.family = { wife: 'Hanako', child: 'Jiro' }; // objオブジェクトに他のオブジェクトを追加

// メソッドの実行
obj.hello();

オブジェクトのプロパティにさらにオブジェクトを追加した場合には、obj.name.lastのようにドット(.)を繋げて記述します。

補足

  • ドット記法はドット表記法とも呼ばれることもあります。

ブラケット記法の使い方

ブラケット記法は、ブラケット[]を使ってプロパティにアクセスする記法です(角括弧のことを英語でブラケットといいます)。

ブラケット[]の中にクォーテーションで囲まれた文字列でプロパティ名を指定することで、オブジェクトの値の取得や変更ができます。

構文を以下に示します。

// 「シングルクォーテーション」と「ダブルクォーテーション」どちらでもOK
オブジェクト名['プロパティ名']
オブジェクト名["プロパティ名"]

サンプルコードを以下に示します。

const obj = {
  name: { first: 'Taro', last: 'Yamada' }, // objオブジェクトのnameプロパティにオブジェクトを設定
  age: 18,
  hello: function () {
    console.log('Hello');
  },
};

// 値の取得
console.log(obj['age']); // ageプロパティの値を取得
console.log(obj['name']['first']); // nameプロパティに設定されたオブジェクトのfirstプロパティの値を取得
console.log(obj['name']['last']); // nameプロパティに設定されたオブジェクトのlastプロパティの値を取得

// 値の変更
obj['age'] = 35; // ageプロパティの値の変更
obj['name']['last'] = 'Suzuki'; // nameプロパティに設定されたオブジェクトのlastプロパティの値の変更

// 値の追加
obj['gender'] = 'male'; // objオブジェクトにgenderプロパティとその値を追加
obj['family'] = { wife: 'Hanako', child: 'Jiro' }; // objオブジェクトに他のオブジェクトを追加

// メソッドの実行
obj['hello']();

オブジェクトのプロパティにさらにオブジェクトを追加した場合には、obj['name']['last']のようにブラケット[]を繋げて記述します。

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

ドット記法とブラケット記法の違いを以下に示します。

  • 変数を使ったプロパティ名のアクセスの違い
    • ドット記法：プロパティ名を変数に使用できない
    • ブラケット記法：プロパティ名を変数に使用できる
  • プロパティ名の制限の違い
    • ドット記法：プロパティ名に制限がある
    • ブラケット記法：プロパティ名に制限がない

各違いについて、これから順番に詳しく説明します。

変数を使ったプロパティ名のアクセスの違い

プロパティにアクセスする際、ドット記法は変数を使用できないが、ブラケット記法は変数を使用できます。

以下のサンプルコードを見てみましょう。

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

const prop = 'name';

// ドット記法を使う場合
console.log(obj.prop);
// undefined ← propプロパティが見つからないため、undefinedが返される

// ブラケット記法を使う場合
console.log(obj[prop]);
// Taro Yamada

ドット記法の場合は、変数propが変数名として解釈されず、そのままプロパティ名として判定されてしまいます。objオブジェクトのpropプロパティを探していますが、見つかれないため、値が未定義という意味のundefinedが返されています。

オブジェクトが保持していないプロパティを取得しようとすると、undefinedが返されます。

一方、ブラケット記法の場合、’name’という文字列が格納された変数propを使って、objオブジェクトのnameプロパティにアクセスが可能です。

そのため、ブラケット記法は動的にプロパティ名を変更したい場合に便利です。以下のサンプルコードでは、配列にプロパティを格納して、オブジェクトの中身を取得しています。

const fruits = {
  apple: 100,
  banana: 150,
  melon: 1000,
};

const fruitsKey = ['apple', 'banana', 'melon'];

fruitsKey.forEach((key) => {
  console.log(`${key}は${fruits[key]}円です`);
});
// ログ出力
// appleは100円です
// bananaは150円です
// melonは1000円です

また、ブラケット記法ではブラケット[]の中で文字列を結合させることも可能です。以下のサンプルコードを見てみましょう。ブラケット[]の中で文字列を整形し、その文字列をプロパティ名にしています。

const persons = {
  person1: 'Taro',
  person2: 'Jiro',
};

const keyBase = 'person';

console.log(persons[keyBase + '1']); // 文字列が結合されて、person1になる
// Taro

console.log(persons[keyBase + '2']); // 文字列が結合されて、person2になる
// Jiro

プロパティ名の制限の違い

ドット記法にはプロパティ名に制限があるが、ブラケット記法には制限がありません。ブラケット記法では「ハイフンで始まるプロパティ名」や「数字で始まるプロパティ名」を使用することができます。

まず、変数名に使える文字列のルールについて少し説明します。変数名には、ハイフンを含むfirst-name、スペースを含むlast name、数字で始まる01nameのような文字列を変数名に使用することができません。

const first-name = "Taro" // SyntaxError になる
const last name = "Jiro" // SyntaxError になる
const 01name = "Hiro" // SyntaxError になる

しかし、オブジェクトのプロパティ名はクォーテーションで囲むことで任意の文字列を使用することができるようになります。例えば、以下のようなオブジェクトを作成することができます。

const obj = {
  'first-name': 'Taro',
  'last name': 'Jiro',
  '01name': 'Hiro',
};

上記に示したオブジェクトのように、変数名に使えない文字列をプロパティ名に使用する場合、プロパティ名をクォーテーションで囲みます。ただし、このような場合には、プロパティ名へのアクセスにはドット記法は使えず、ブラケット記法しか使うことができません。以下のサンプルコードを見てみましょう。

const obj = {
  'first-name': 'Taro',
  'last name': 'Jiro',
  '01name': 'Hiro',
};

// ブラケット記法を使う場合
console.log(obj.prop);
console.log(obj["first-name"]);
console.log(obj["last name"]);
console.log(obj["01name"]);

// ドット記法を使う場合
console.log(obj.first-name); // SyntaxError になる
console.log(obj.last name); // SyntaxError になる
console.log(obj.01name); // SyntaxError になる

上記に示すようにドット記法を使うとエラーになってしまします。

「ドット記法」と「ブラケット記法」の使い分け

オブジェクトへのアクセスには、基本的にはコードの読みやすさから「ドット記法」を使います。

ドット記法が使えない場合(変数を使ってプロパティ名にアクセスする場合など)には、「ブラケット記法」を使います。

例えば、「ドット記法」で記述しているconsole.log(obj)を「ブラケット記法」で記述するとconsole[‘log’](obj)となり、少し読みにくいですよね。

本記事のまとめ

この記事では、ドット記法とブラケット記法について、以下の内容を説明しました。

  • ドット記法の使い方
  • ブラケット記法の使い方
  • ドット記法とブラケット記法の「違い」と「使い分け」

お読み頂きありがとうございました。