Help us understand the problem. What is going on with this article?

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

JavaScriptにはオブジェクトのプロパティにアクセスする方法が2種類あります。
使い方や違いを理解できたのでメモしたいと思います。

ドット記法

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

const obj = {};
obj.name = 'taka'; // objのプロパティをセット
obj.hello = function(){
    console.log(`Hello,${this.name}`);
}

console.log(obj.name); // taka
obj.hello(); // Hello,taka

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

ブラケット記法

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

const obj = {};
obj['name'] = 'taka'; // objのプロパティをセット
obj['hello'] = function(){
    console.log(`Hello,${this.name}`);
}

console.log(obj['name']); // taka
obj['hello'](); // Hello,taka

メソッドも[ ]の後に()を付けて実行できます。

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

ブラケット記法は、プロパティ名に変数を与えることができます。ドット記法ではできません。

const propName = 'name'; // 変数を用意

const obj = {};
obj[propName] = 'taka'; // プロパティ名に変数を使う
console.log(obj); // {name: "taka"}

obj.propName = "taka"; //ドット記法で変数を使ってもプロパティ名になる
console.log(obj); // {name: "taka",propName: "taka"}

そのため、ブラケット記法はループなど動的にプロパティ名を変更したい場合に便利です。

例えば、配列にキーを格納して、オブジェクトの中身を取得した時など。

const key = ['html','css','javascript'];
const obj = {
    html:'骨組み',
    css:'装飾',
    javascript:'動作'
}

key.forEach(function(key){
    let result = key + 'は、Webページの' + obj[key] + 'を作ります。'
    console.log(result);
});

まとめ

ドット記法とブラケット記法の特徴、違いを記述しました。
2種類の方法がありますが、可読性の点から不必要に混在して使わない方が良さそうですね。

参考

https://ichigo-pantsu.site/javascript-dot-bracket/
https://harakotan.hatenablog.jp/entry/2015/05/17/004707
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors

TakanoriOkawa
JavaScript・Vue.jsを勉強中です。学んだことをアウトプットしていきます。至らない点がありましたらご指摘いただけると嬉しいです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away