JavaScript におけるアロー関数と通常の関数。どちらを使用しますか?

JavaScript では、関数を定義する 2 つの主な方法、アロー関数と通常の関数を提供します。一見すると似ているように見えますが、コードの実行方法や構造に影響を与える重要な違いがいくつかあります。各タイプをいつ使用するかをよりよく理解できるように、これらの違いを詳しく見てみましょう。

構文の違い

アロー関数は短く、 => を使用します。シンボル。通常の関数と比較すると次のようになります。

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

アロー関数を使用すると、単一の式を返す場合に return キーワードをスキップできます。このため、アロー関数はより短く単純な関数として人気があります。

このバインディング

通常の関数では、関数を呼び出すオブジェクトを指します。ただし、アロー関数には独自の this コンテキストがありません。代わりに、定義されている周囲のコードからこれを継承します。

この違いが動作にどのような影響を与えるかを示す例を次に示します。

const object = {
  name: 'JavaScript',
  regularFunction: function() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunction: () => {
    console.log(this.name); // undefined
  }
};

obj.regularFunction(); // 'JavaScript'
obj.arrowFunction();   // undefined

これは、関数をイベント リスナーに渡すときに役立つかもしれません。見てください:

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // refers to the button element!
});

引数オブジェクト

通常の関数は、関数に渡されるすべての引数を保持する引数オブジェクトにアクセスできます。アロー関数にはこれがありません。代わりに残りのパラメータ ...args を使用します。

// regular function with arguments
function sum() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

// arrow function with rest parameters
const sum = (...args) => args.reduce((a, b) => a + b);

コールバックでの使用法

アロー関数は、特にコールバックを必要とするもの、たとえば Promise や .map() や .filter() などの配列メソッドを処理する場合に、コードを簡素化できます。

// using arrow functions in array methods
const numbers = [1, 2, 3];
const squares = numbers.map(number => number * n); // [1, 4, 9]

アロー関数と通常の関数をいつ使用するか

一般に、アロー関数は次の場合に適しています。

• 配列メソッドやコールバックのような短くて簡潔な関数
• クラスメソッドやクロージャなど、一貫性を保つ必要がある状況

通常の関数は次の場合に役立ちます。

• オブジェクト メソッドやイベント リスナーなど、特定の this バインディングが必要です
• 残りのパラメータを定義せずに引数オブジェクトを使用したい

ここで興味深いことに注目してみましょう。ご覧のとおり、違いは非常に微妙です。ほとんどの場合、コードベースで this または引数を頻繁に使用しない限り (可能性は低いですが)、どちらを選択しても問題ありません。

肝心なのは、好きな方を選択し、プロジェクト全体で一貫性を保つだけです。

このアプローチに同意しますか?

以上がJavaScript におけるアロー関数と通常の関数。どちらを使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。