動的に識別子指定したいときはブラケット記法を使おう[オレ得JavaScriptメモ]

久しぶりにJSメモです。今日は本当にメモ程度…恥ずかしながら今まで知らなかったブラケット記法について。いや知ってたけど使い方あんまりわかってなかった。単純だけどこいつは強力。

例えば、あるnewしたオブジェクトabcにプロパティを設定したいとする。プロパティの型は何でもいいんだけどここでは単純に数値としてみよう。


var abc = new Object;
abc.xyz = 56;

abcにxyzというプロパティを作って56という値を代入している。

何気なく書いてるけどオブジェクトabcとそのプロパティxyzは「.(ドット)」で繋げて記述している。これを「ドット記法」という。まんまだね。

JavaScriptのプロパティ(メソッドでもいいけど)へのアクセスにはもう一つ「ブラケット記法」っちゅうのがある。

上のコードをブラケット記法で書き換えてみよう。


var abc = new Object;
abc["xyz"] = 56;

プロパティにあたる部分を角括弧で囲っている。ドットは使用していない。そしてxyzはクォーテーョンで囲っている。つまり文字列だ。

文字列、というのが結構重要。どういうことかというと


var abc = new Object;
var pName = "xyz";
abc[pName] = 56;

な。ブラケット記法のプロパティ名の指定は文字列なので、文字列そのものだけでなく文字列型の値を持つ変数(オブジェクト)で指定してもいいわけ。

ここではpNameという変数にxyzという文字列を格納している。角括弧の中の変数pNameを通じてxyzという文字列を取得し、その文字列を名前に持つプロパティを作っているということ。

また、ブラケット記法でも普通に多階層連結できる。


var abc = new Object;
abc.lmn = new Object;
abc["lmn"]["pqr"] = 12;
console.log(abc.lmn.pqr);//12

静的にプロパティ設定するだけでこんなことやってたらコード書く量増えるだけで何の得もないような気がするけど、設定だけじゃなくて参照でも同じようにブラケット記法で記述できるのが便利。

どういうことかというと状況に応じて参照すべきプロパティを変えられるというところね。


var abc = new Object;
abc.lmn = 12;
abc.pqr = 34;
abc.xyz = 56;
var sayValue = function(pName){
return abc[pName];
}
console.log(sayValue("lmn"));//12
console.log(sayValue("pqr"));//34
console.log(sayValue("xyz"));//56

こんな感じ。例では値の参照してるだけど、値の変更(更新)も、ないプロパティの追加も当然できる。実用的なところではifやcaseで振り分けてるところを変数一発で指定できるようになるとか、そんな感じになると思う。

スポンサーリンク

まとめ

ドット記法とブラケット記法が混在してると何がなんだかよく解らない。ブラケット記法の良いところはプロパティ(メソッド)参照を動的に変えられるところ。

なので、静的な設定でいいところ(例えばオブジェクトの初期状態)なんかは普通にドット記法で記述し、通常ブラケット記法を使わない。動的振り分けやプロパティ生成が必要になった時にブラケット記法を用いる…というルール付の元でコード書くと保守もしやすくなるのでは、と思われます。

基本ぽいけど知らなくてスマソ。知らなかったあなた、仲魔ですね。んじゃまた。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク