バニラJavaScriptでオブジェクトにプロパティを追加する方法｜ドット記法とブラケット記法の違いを解説

JavaScriptには、オブジェクトに新しい項目（プロパティと値）を追加する方法が2つあります。

1. ドット記法：object.thingToAdd
2. ブラケット記法：object['thingToAdd']

それぞれの書き方と違いを、具体的なコード例とともに見ていきましょう。

ドット記法とは

まずはドット記法から確認します。次のような犬のオブジェクトを用意しました。

let dog = {
  name: "Naya",
  age: "2",
  color: "black",
}

// dogオブジェクトに項目を追加
dog.breed = "Rottweiler mix"

// コンソールに出力して確認
console.log(dog)
// { name: "Naya", age: "2", color: "black", breed: "Rottweiler mix"}

dog.breed = "Rottweiler mix" のように、「オブジェクト名.プロパティ名」の形式で値を代入するだけで、新しいプロパティが追加されます。これがドット記法です。

ブラケット記法とは

ブラケット記法は、ドット記法に比べてプロパティ追加に関する制約が少ないのが特徴です。先ほどと同じ犬のオブジェクトを使って確認してみましょう。

let dog = {
  name: "Naya",
  age: "2",
  color: "black",
}

今度はブラケット記法でプロパティと値を追加します。

dog["weight"] = "34kg"

console.log(dog)
// { name: "Naya", age: "2", color: "black", weight: "34kg"}

ご覧のとおり、この例ではドット記法とまったく同じ結果になります。では、この2つの記法にはどのような違いがあるのでしょうか。詳しく比較していきます。

ドット記法 vs. ブラケット記法

まず、ドット記法でプロパティ名に数字を指定しようとしてみます。

// ドット記法
dog.1 = "Property 1"
console.log(dog)
// Uncaught SyntaxError: Unexpected number

エラーが発生してしまいました！これは、ドット記法ではプロパティ名に数字を使用できないためです。

一方、ブラケット記法なら、識別子が文字列としてフォーマットされていれば数字も使えます。

// ブラケット記法
dog["1"] = "Property 1"
console.log(dog)
// { 1: "Property 1", age: "2", color: "black", name: "Naya" }

このように、ブラケット記法はドット記法よりも柔軟性が高いことがわかります。

どちらを使うべき？

基本的には、読みやすさの観点からドット記法を優先的に使うのが良いプラクティスです。ただし、以下のようなケースではブラケット記法を使いましょう。

• プロパティ名が数字で始まる場合
• プロパティ名に特殊記号やスペースが含まれる場合
• プロパティ名が予約語（キーワード）と重なる場合
• 変数の値を動的にプロパティ名として使いたい場合

ドット記法のルール

• プロパティ名（識別子）には、英数字（a〜z）、アンダースコア（_）、ドル記号（$）のみ使用できます。
• プロパティ名は数字で始められません。
• プロパティ名に変数は使用できません。

ブラケット記法のルール

• プロパティ名は文字列型の値、または文字列を参照する変数である必要があります。
• 識別子にスペースを含めることも可能です（例：[" property"]）。
• 文字列の識別子は数字で始められます（例：["1st"]）。

状況に応じて2つの記法を使い分けることで、より安全で保守しやすいJavaScriptコードを書けるようになります。