JavaScript のアロー関数で括弧と中括弧を使用する必要があるのはどのような場合ですか?

アロー関数の詳細

ES6 で導入されたアロー関数は、関数を定義するための簡潔な構文です。これらは、中括弧や括弧を使用した異なる表記法で表示されることがよくあります。この記事では、これら 2 つのバリアントの違いについて詳しく説明します。

アロー関数の定義

アロー関数は、一連のパラメーターと太い矢印 (=>) で始まります。戻り値は、次のいずれかで囲まれた本体によって決定されます:

• 括弧: 本体が単一の式で構成される場合、括弧が使用されます。例:

  const foo = (params) => (
  <span>
    <p>Content</p>
  </span>
  );

• カーリー中括弧: 本体が複数行にまたがる場合、または複数のステートメントが含まれる場合は、中括弧が必要です。例:

  const handleBar = (e) => {
  e.preventDefault();
  dispatch('logout');
  };

違いを理解する

違いは戻り値にあります。 括弧は返される単一の値を示し、中括弧は複数行のコードまたは複数のステートメントの実行を示します。

JSX と括弧

JavaScript XML (JSX) では、foo に見られるように、本文は次のように見える場合があります。複数行にまたがりますが、実際には 1 つの要素にコンパイルされます。その場合に括弧が使用されるのはこのためです。

複数の行と括弧

混乱を避けるために、すべて同じ結果をもたらすアロー関数の例を以下に示します。

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
};

コードの回避ブロック

かっこは、コード ブロックとして解釈されるのを防ぐために、アロー関数のオブジェクト リテラルの周囲にも使用されます。例:

const x = () => {} // Does nothing
const y = () => ({}) // returns an object

結論として、中括弧と中括弧のどちらを選択するかは、アロー関数のかっこは、単一の値を返すか、複数行のコードを実行するかによって異なります。これらの表記のニュアンスを理解すると、JavaScript コードでアロー関数を効果的に使用するのに役立ちます。

以上がJavaScript のアロー関数で括弧と中括弧を使用する必要があるのはどのような場合ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。