JavaScript/PHP

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

アイキャッチ画像

オブジェクトのプロパティにアクセスする方法は2通りあります。
「オブジェクトって?」「プロパティって?」となった方は以下記事をご参照ください。
「オブジェクト」「プロパティ」「メソッド」って何?

ドット記法とは

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

「’いちご’」という値を取り出す場合は、変数「name」key「first_name」.(ドット)で繋げて、name.first_nameと記載する事で値を取得できます。

const name = { first_name : 'いちご', last_name: 'ぱんつ' }

//オブジェクトを格納した変数nameから、プロパティ名first_nameを取得してコンソールに表示
console.log(name.first_name); //いちご

ブラケット記法とは

[](ブラケット)を使ってプロパティにアクセスする方法です。

「’いちご’」という値を取り出す場合は、変数「name」key「first_name」[](ブラケット)で繋げて、name[first_name]と記載する事で値を取得できます。

const name = { first_name : 'いちご', last_name: 'ぱんつ' }

//オブジェクトを格納した変数nameから、プロパティ名first_nameを取得してコンソールに表示
console.log(name['first_name']); //いちご

「.(ドット記法)」と「[](ブラケット記法)」の違いについて

[](ブラケット記法)は、プロパティ名に変数名 [getName] を使う事ができます。

const name = { first_name : 'いちご', last_name: 'ぱんつ' }

//プロパティ名の文字列
const getName = 'last_name'

//プロパティ名に変数を指定してログを出力
console.log(name[getName]) //ぱんつ

 

[](ブラケット記法)」は「.(ドット記法)」と違い変数を使えるので、配列をforEach()する際などに以下のように使用できます。

「fruitKeys」から値を取得し、それを使い連想配列「fruitObj」から、色データを取得してみる

以下サンプルコードです。
F12のコンソールで実行すると実行結果が確認できます。

const fruitKeys = [ 'strawberry', 'orange', 'grape' ]
const fruitObj = { strawberry:'赤', orange:'橙', grape:'紫' }

const box = []
fruitKeys.forEach(function(key) {
    let result = key + 'は' + fruitObj[key] + '色です。'
    box[key]=result

console.log(key) //strawberry, orange, grape
console.log(fruitObj[key]) //赤, 橙, 紫
});

 
※「連想配列」は、「キー」と「値」のペアによるデータ構造のことです
{ key1:value, key2:value, key3:value }

※「[](ブラケット記法)」で記載しているfruitObj[key]の部分を、「.(ドット記法)」fruitObj.keyで記述することはできません。

まとめ
  • ドット記法:プロパティ名に変数は使えない
  • ブラケット記法:プロパティ名に変数が使える