ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript (JS) の ( )=>{ } と ( )=>( ) aero 関数の違い

JavaScript (JS) の ( )=>{ } と ( )=>( ) aero 関数の違い

Susan Sarandon
リリース: 2024-12-25 13:51:14
オリジナル
113 人が閲覧しました

Difference between ( )=>{ } および ( )=>( ) JavaScript (JS) の aero 関数{ } および ( )=>( ) JavaScript (JS) の aero 関数" />

()=>{} と ()=>() の違いは、関数本体 とJavaScript の return ステートメント。どちらもアロー関数ですが、使用される構文に応じて動作が若干異なります。


1. ()=>{} (中括弧付き)

  • 構文: 矢印 (=>) の後に中括弧 {} を使用すると、関数本体 が定義されます。
  • 値を返したい場合は、明示的に return キーワードを使用する必要があります。
  • return がなければ、関数は何も返しません (つまり、暗黙的に未定義を返します)。

例:

const add = (a, b) => {
  return a + b; // Explicit return
};

console.log(add(2, 3)); // Output: 5
ログイン後にコピー
ログイン後にコピー

キーポイント:

  • 中括弧は完全な関数本体を示します。
  • 値を返すには、return キーワードを明示的に使用する必要があります。

2. ()=>() (括弧付き)

  • 構文: 矢印 (=>) の後にかっこ () を使用すると、暗黙的な戻り値が定義されます。
  • これは、単一の式を直接返すための省略形です。
  • return キーワードは必要なく、中括弧も使用されません。

例:

const add = (a, b) => a + b; // Implicit return

console.log(add(2, 3)); // Output: 5
ログイン後にコピー

キーポイント:

  • 括弧は、内部の単一式の暗黙的な戻りを示します。
  • return キーワードを使用する必要はありません。

いつどちらを使用するべきですか?

()=>{} を使用する場合:

  1. 関数には複数のステートメントまたは複雑なロジックが含まれています。
  2. 何が返されるかを明示的に制御する必要があります。

例:

const processNumbers = (a, b) => {
  const sum = a + b;
  const product = a * b;
  return sum + product; // Explicitly return the result
};

console.log(processNumbers(2, 3)); // Output: 11
ログイン後にコピー

次の場合に ()=>() を使用します。

  1. この関数は、値を返す必要がある単一行の式です。
  2. 構文を簡潔に保ちたいと考えています。

例:

const square = (x) => x * x; // Implicit return

console.log(square(4)); // Output: 16
ログイン後にコピー

注意が必要なケース

オブジェクト リテラルを返す

暗黙的な戻り値を使用してオブジェクト リテラルを返したい場合は、それをかっこで囲む必要があります。それ以外の場合、JavaScript は {} を関数本体として解釈します。

例:

const add = (a, b) => {
  return a + b; // Explicit return
};

console.log(add(2, 3)); // Output: 5
ログイン後にコピー
ログイン後にコピー

概要表

Syntax Behavior Example
()=>{} Full function body, explicit return const add = (a, b) => { return a b; };
()=>() Single-line implicit return const add = (a, b) => a b;

ユースケースに基づいて、複雑な関数の明確さ (()=>{}) と単純な関数の簡潔な構文 (()=>()) のどちらかを選択します。

以上がJavaScript (JS) の ( )=>{ } と ( )=>( ) aero 関数の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート