連想配列へ要素を追加するコードはどちらが適切ですか？

Question

連想配列へ要素を追加するコードですが、下記のパターン1とパターン2であれば、どちらが適切ですか？

パターン1

var hash1 = {};

hash1.aaa = 'あああ';
hash1.bbb = 'びびび';
hash1.ccc = 'ししし';	

パターン2

var hash2 = {};

hash2['aaa'] = 'あああ';
hash2['bbb'] = 'びびび';
hash2['ccc'] = 'ししし';	

上記2パターン以外の書き方があれば、それも教えていただけると嬉しいです。

Answer 1

こんにちは。
より良いのはパターン１かと思います。

コードの検証ツールとしてESLint を使っている中で、パターン２で書くと、以下

のように ESLint から

["aaa"] is better written in dot notation. (dot-notation)

と言われてしまいます。

こちらのほうがいい理由について、ESLint のページ

https://eslint.org/docs/rules/dot-notation

には、

In JavaScript, one can access properties using the dot notation (foo.bar) or square-bracket notation (foo["bar"]). However, the dot notation is often preferred because it is easier to read, less verbose, and works better with aggressive JavaScript minimizers.

と書かれているので、これに乗っておくか、という感じです。

以上参考になれば幸いです。

Comments

[pypanman]

なるほど！
ありがとうございます。

Answer 2

JavaScriptって、どちらの書き方もできますもんね。
両者の違い、コンピュータにとっても読みやすく、
人にとってもわかりやすいか、という部分では、
jun68yktさんがおっしゃっている通りなのですが、
僕はいつも、用途によって使い分けています。

例えば、状況によって、
jQuery関数の、addClassとremoveClassを切り分けたい時です。

function classAction(scroll){
  var classMethod = scroll >= 300 ? 'addClass' : 'removeClass';
  
  $('#testTarget')[classMethod]('viewClass');
}

これは、scrollが300以上なら、addClass、300未満だったらremoveClassを実行する、というものになります。
こうすることによって、ステートメントが一行でスッキリさせることができます。
ドット記法だとこの方法は取れないかと思います。
ifでブロック分けして処理しなければいけません。
（もっとも、そっちのほうが、人的にも見栄え的にわかりやすいんですが。
そして、今回のクラス入れ替えのケースはjQueryでもネイティブでも一つの関数でできるんですけどね。）

上記の用途以外は、ドット記法で書いております。

ご参考になれば幸いです。

Comments

[pypanman]

ご回答ありがとうございます。

通常はドット記法、必要であればブラケット記法、で使い分けておられるのですね。

僕もそうします。

Answer 3

こんな感じで

var hash3 = {};
Object.defineProperty(hash3,'aaa',{value:'あああ',configurable:true,enumerable:true,writable:true});
Object.defineProperty(hash3,'bbb',{value:'べべべ',configurable:true,enumerable:true,writable:true});
Object.defineProperty(hash3,'ccc',{value:'ししし',configurable:true,enumerable:true,writable:true});
/*とりあえず表示*/
for(var i in hash3){;
  console.log(i+":"+hash3[i]);
}

/*要素をいじって*/
delete(hash3.aaa);
hash3.ccc="ほげー";

/*再表示*/
for(var i in hash3){;
  console.log(i+":"+hash3[i]);
}

Comments

[pypanman]

あべし！

こんな構文あるんですねー。
勉強になります。