【JavaScript入門】Objectのブラケット記法とドット記法の使い方

どうもフロントエンドエンジニアのまさぴょんです！

今回は、Objectの基本操作と言うことで、「ブラケット記法」と「ドット記法」によるデータ参照やデータの更新について解説していきます。

前回・前々回に紹介した、Object操作のメソッドたちと組み合わせると、できることが広がるので活用してみてください。

【JavaScript入門】Object.entries()でObjectから配列を作成する

【JavaScriptのObject操作: entries編】

【JavaScript入門】Object.keysとObject.valuesでObjectから配列を作成する

【JavaScriptのObject操作: keys&values編】

1 Objectとは？
2 ObjectのData参照方法: ドット記法
3 ObjectのData参照方法: ブラケット記法
4 ドット記法とブラケット記法の使い分け
5 サンプルコード
6 まとめ
7 JavaScript書籍 Ver. 中級-上級者向け
8 JavaScript書籍 Ver. 初級者向け
9 参考・引用
10 最近の投稿

Objectとは？

それでは、今回のメインテーマである「ブラケット記法」と「ドット記法」の使い方に入る前に、Objectとは、どんなものかを記述しておきます。

JavaScriptのObjectは、{} (波括弧)で囲まれており、その中に「key名」(プロパティ名)と、それに紐づく「value」(値)を持ちます。

「key名」(プロパティ名)は、その名が示す通りObjectにsetされた「value」(値)を取得(get)したり更新(set)するためのkey(Access-key)です。

Objectの構造

// 1. Objectは、「key名」(プロパティ名)と、それに紐づく「value」(値)を持ちます。
const obj = { name: "もも", type: "Cat", age: 5};


// 2. valueには、様々な値をSetすることができる。
const Cat = {
  name: "もも",
  type: "Cat",
  age: 5,
  hello: ()=> { console.log(`${Cat.name}は、Myaoと鳴いた!`); }, 
  eat: ([esa1, esa2])=> { console.log(`${esa1}&${esa2}が今日の${Cat.name}のご飯`); },
};

value(値)には、様々な値をsetすることができます。上記のObjectを記述したSampleでは、「hello」と「eat」には、アロー関数をsetしています。

ObjectにMethodを作っているようなものですね。Objectをカスタマイズすると、実装の幅が広がります。

ObjectのData参照方法: ドット記法

それでは、Objectのデータを新規作成・更新(set)・取得(get)する方法、その①「ドット記法」を紹介します。

const cat = {}; // 空のObjectを作成

// 1.「 Object名.key名 = value 」 で、key名とvalue(データ)を追加 (Data-Set)
cat.name = "momo";

// 2. Object名.key名で、value(データ)を取得 (Data-Get)
cat.hello = ()=> { console.log(`${cat.name}は、Myaoと鳴いた`) };

cat.hello();  // 出力結果：momoは、Myaoと鳴いた

ドット記法では、「Object名.key名」で「value」(値)を取得(get)できます。

value(値)を新規作成(create)する場合は、「Object名.key名 = value」でObjectに指定したkey名とvalueを新規作成(create)します。

更新(update)する場合は、「Object名.key名 = value」でObjectの指定したkey名に紐づいているvalueを更新(update)します。

ObjectのData参照方法: ブラケット記法

次に、Objectのデータを新規作成・更新(set)・取得(get)する方法、その②ブラケット記法を紹介します。

const cat = {}; // 空のObjectを作成

// 1.「 Object名["key名"] = value 」 で、key名とvalue(データ)を追加 (Data-Set)
cat["name"] = "momo";

// 2. Object名["key名"] で、value(データ)を取得 (Data-Get)
cat["hello"] = ()=> { console.log(`${cat["name"]}は、Myaoと鳴いた`) };

// 3. ブラケット記法の注意点は、文字列でkey名を表現する必要があること！
cat["hello"](); // 出力結果：momoは、Myaoと鳴いた

ブラケット記法では、「 Object名[“key名”] 」で「value」(値)を取得(get)できます。

value(値)を新規作成(create)する場合は、「 Object名[“key名”] = value 」でObjectに指定したkey名とvalueを新規作成(create)します。

更新(update)する場合は、「 Object名[“key名”] = value 」でObjectの指定したkey名に紐づいているvalueを更新(update)します。

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

ドット記法とブラケット記法では、ドット記法の方が、ドットを書くだけで済むので扱いやすいです。

なので、基本的にはドット記法を使って、key名に「変数」(動的に変化する値)を使いたい時だけ、ブラケット記法を使用することをお勧めします。

例えば、次のような処理ですね。

const cartFruits = {
  mikan: 7,
  apple: 5,
  grape: 3, 
  momo: 5
};

const fruitsKey = Object.keys(cartFruits);
// const fruitsKey = ["mikan","apple","grape","momo"]; と同様の結果

fruitsKey.forEach(fruits => console.log( `${fruits}は、${cartFruits[fruits]}個カートに入っています。` ));

// < 出力結果 >
// mikanは、7個カートに入っています。
// appleは、5個カートに入っています。
//  grapeは、3個カートに入っています。
//  momoは、5個カートに入っています。

サンプルコード

const cat = {}; // 空のObjectを作成

cat.name = "momo";

cat.hello = ()=> { console.log(`${cat.name}は、Myaoと鳴いた`) };
cat.hello(); // 出力結果：momoは、Myaoと鳴いた

cat["from"] = "東京都";
console.log(`${cat["name"]}の出身は、${cat["from"]}です`);

const eat = ([esa1, esa2])=> { console.log(`${esa1} & ${esa2}が今日の${cat.name}のご飯`) };

const action = "eatting";
cat[action] = eat; // ブラケット記法は、key名に変数を使用することができる！

cat["eatting"](["ロボ玉", "Magoro"]);
// 出力結果： ロボ玉 & Maguroが今日のmomoのご飯