中括弧の配置によって結果が異なるのはなぜですか？

この記事から抜粋した以下のコードスニペットでは、中括弧の配置が1回だけ変更されているため、異なる結果が生成されるのはなぜですか。

開始中括弧{が新しい行にある場合、test()が返さundefinedれ、アラートに「いいえ-壊れました：未定義」が表示されます。

function test()
{
  return
  { /* <--- curly brace on new line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

ブレースは、同じ行にある場合return、test()オブジェクトを返し、「素晴らしい」警告されます。

function test()
{
  return { /* <---- curly brace on same line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

これがJavaScriptの落とし穴の1つです。セミコロンの自動挿入です。セミコロンで終わらないがステートメントの終わりである可能性のある行は自動的に終了するため、最初の例は次のようになります。

function test()
{
  return; // <- notice the inserted semicolon
  { 
    javascript: "fantastic"
  };
}

セミコロンの挿入について言及しているDouglas CrockfordのJSスタイルガイドも参照してください。

2番目の例では、プロパティjavascriptとその値が"fantastic"である（中かっこで構築された）オブジェクトを返します。これは、実質的に次のようになります。

function test() {
    var myObject = new Object();
    myObject.javascript = "fantastic";
    return myObject;
}

JavaScriptはステートメントの最後にセミコロンを必要としませんが、欠点はセミコロンの場所を推測する必要があることです。ほとんどの場合、これは問題ではありませんが、意図しないセミコロンが作成される場合があります。

これに関する私のブログ投稿の例（JavaScript-ほとんど行ベースではない）：

このようにコードをフォーマットすると：

function getAnswer() {
   var answer = 42;
   return
      answer;
}

次に、次のように解釈されます。

function getAnswer() {
  var answer = 42;
  return;
  answer;
}

returnステートメントはパラメーターのない形式を取り、引数は独自のステートメントになります。

コードでも同じことが起こります。関数は次のように解釈されます。

function test()
{
  return;
  {
    javascript : "fantastic"
  };
}

私は個人的には、読みやすさの点でオールマンスタイル（vs K＆Rスタイル）を好みます。

の代わりに…

function test() {
  return {
    javascript : "fantastic"
  };
}

好き…

function test() 
{
  var obj =
  {
    javascript : "fantastic"
  };

  return obj;
}

しかし、これは回避策です。私はそれと一緒に暮らすことができます。

それは、javascriptが最もよく「;」を置くためです。各行の終わりにあるので、基本的には、同じ行に{を返すと、JavaScriptエンジンはさらに何かがあることを確認し、新しい行に「;」を入れるのを忘れたと考えて、それを挿入します。

ここで中括弧は、新しいオブジェクトの作成を示します。したがって、コードは次と同等です。

function test() {
  var a = { javascript : "fantastic" };
  return a;
}

これは機能しますが、あなたが書く場合：

function test() {
  var a = { javascript : "fantastic" };
  return; // ; is automatically inserted 
      a;
}

それはもはや機能しません。

問題は、実際に上記のセミコロン注入です。私はこの件に関して良いブログ投稿を読んだだけです。この問題と、JavaScriptの詳細について説明しています。また、いくつかの優れたリファレンスも含まれています。ここで読めます