xxx: function($bbb) { xxx;}という書き方は正しいでしょうか。

Question

xxx: function($bbb)
    {
        $('#sample, #sample2').fadeIn();
        $('#modal' ).append( $contents );
    }

上記のようなコードを見つけたのでそのように拡張子「.js」のファイルに書いて、HTMLファイルでそのｊｓファイルを読み込ませたらブラウザのconsole画面でUncaught SyntaxError: Unexpected token (というエラーになります。

以下のように() を追加するとエラーは消えます。

xxx: (function($bbb)
    {
        $('#sample, #sample2').fadeIn();
        $('#modal' ).append( $contents );
    });

しかし冒頭に書いたような（）を省いた書き方でも見つけてきたページではエラーにはなっていません。
これはどういった状況の時にエラーになったりならなかったりしているのでしょうか。

Answer 1

JavaScriptにおける{}構文及び:の多義性に起因します.

あなたが提示したコードにはおそらくそれを囲むもう一つの{}があるはずで, この{}の意味合いがオブジェクトの宣言なのかブロックスコープの宣言なのかに応じ:の意味合いもプロパティの宣言もしくはラベルの宣言に変化します.

//オブジェクトを定義する{}
var a = {
	xxx: function(){}//xxxは値を関数にとるプロパティ名
};
({
	xxx: function(){}//xxxは値を関数にとるプロパティ名
});
//ブロックスコープを定義する{}
{
	xxx: (function(){})//xxxは匿名関数を宣言した行に対するラベル(実用上の意味はない)
}

---

下記は何れもECMA Script 2015で導入された構文です.

({})記法はオブジェクトを返すアロー関数を定義する際に使います.

var f = () => ({//このカッコはオブジェクトのカッコ
	aaa: "あああ",
	xxx: function(){}
});

var g = () => {//このカッコはブロックスコープのカッコ
	const a = 1;
	return a;
}

参考:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

ブロックスコープは変数の有効範囲を制限します.(if文などの{}構文と同等.)

const a = 1;
{
	const a = 2
	console.log("inner", a);
}
console.log("outer", a);

参考:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/block

Comments

[kantowebmanager]

ありがとうございます。
「//xxxは値を関数にとるプロパティ名」のところの「xxx: function(){}」に対して、「({」と「})」で囲まれていますが、これは何でしょうか。
それとなのですが、ブロックスコープがよくわからないのですが、オブジェクト定義とどう異なるのでしょうか。