Return ステートメントと返されるオブジェクトの間に改行が発生すると、JavaScript 関数が Unknown を返すのはなぜですか?

Return ステートメントとオブジェクトの間に改行が発生すると JavaScript 関数が未定義を返す

JavaScript では、関数は次の場合にオブジェクトを返すことが期待されます。次の例に示すように、return ステートメントの直後にオブジェクト定義が続きます。

<code class="javascript">function foo1() {
  return { msg: "hello1" };
}</code>

console.log(JSON.stringify(foo1())); // 出力: { msg: "hello1" }
ただし、改行によって return ステートメントがオブジェクト定義から区切られている場合、関数は以下に示すように unknown を返します。

<code class="javascript">function foo2() {
 return
 { msg: "hello2" };
}</code>

console.log (JSON.stringify(foo2())); // 出力: unknown

この動作は、JavaScript の自動セミコロン挿入 (ASI) メカニズムが原因で発生します。 ASI は、コードの適切な実行と解釈を保証するために、特定のコンテキストでセミコロンを想定します。 foo2() の場合、改行はセミコロンとして解釈され、return ステートメントが終了し、オブジェクト定義の前に空のステートメントが導入されます。

Solution

この問題を解決するには、グループ化演算子を使用して、return ステートメントとオブジェクト定義が単一の式として評価されるようにします。これにより、ASI の介入が防止されます。

<code class="javascript">function foo2() {
  return ({ msg: "hello2" });
}</code>

美的考慮事項

ASI の問題を回避することは重要ですが、コードを記述する際には美的要素を考慮することもできます。開発者の中には、わかりやすくするために式をグループ化したり、コードの構造を強調したりすることを好む人もいます。例:

<code class="javascript">return ([
  "ul",
  ["li",
    ["span", {class: "name"}, this.name],
    ["span", {id: "x"}, "x"]
  ]
]);</code>

または

<code class="javascript">function() {
  return (
    doSideEffects(),
    console.log("this is the second side effect"),
    1 + 1
  );
}</code>

これらの例では、式を整理し、読みやすさを向上させるためにグループ化演算子が使用されています。

以上がReturn ステートメントと返されるオブジェクトの間に改行が発生すると、JavaScript 関数が Unknown を返すのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。