通常のもののどこが間違っていますか?" />

JavaScript の知識が深まり、なぜ ECMAScript 2015 (ES6) にアロー関数が追加されるのか疑問に思っているのは、あなただけではありません。この言語とその複雑さと癖についての知識を深めていくうちに、私も同じことを疑問に思っていることに気づきました。この記事では、違い、利点、追加された理由、いつ使用する必要があるかを説明します。

違いについて話しましょう

アロー関数が導入される前は、関数は次のような従来の形式で宣言する必要がありました。

function add(x, y) {
  return x   y;
}

または式として宣言:

const addFunction = function add(x, y) {
  return x   y;
}

アロー関数の導入により、これは次のように記述できます:

const addFunction = (x,y) => x   y

簡潔な構文

上記の例から、アロー関数を使用し、その暗黙的な戻り機能を活用することで、関数を 1 行にすばやくリファクタリングできることが簡単にわかります。結果として得られるコードは、より簡潔でクリーンで読みやすくなり、開発がよりスムーズになり、デバッグが高速化されます。

巻き上げ

JavaScript ランタイムはデフォルトで、実行コンテキストの作成時にすべての関数と変数宣言をスコープの先頭にホイストします。たとえば、グローバル スコープ内では、これにより、宣言されたすべての関数と変数が、後で呼び出されるすべての関数で使用できるようになります。ただし、アロー関数は決してホイストされないため、関数が実行される正確な場所とアクセスできる変数をより詳細に制御できます。

コンテクスト

JavaScript 関数が実行されるたびに、this の値など、関数が実行されている環境に関する情報を含む実行コンテキストが作成されます。従来の関数は独自のコンテキストで実行されますが、アロー関数は常にそれを呼び出した関数のコンテキストを継承します。
以下のコードを使用します:

class Person {
    constructor(){
        this.name = "George";
        this.greetings = ["Good Morning,","Hello!","Howdy!"];
    }

    printGreetings(){
        this.greetings.forEach(function print(greet){
            console.log(`${greet} ${this.name}`);
        });
    }
}

let person = new Person();
person.printGreetings();

次のエラーが表示されます: 未定義のプロパティ 'forEach' を読み取れません。これは、printGreetings 関数が Person クラスのコンテキスト内にあり、そのコンテキストを継承しているにもかかわらず、forEach 関数 (たとえ組み込みの JavaScript 関数) は、this.name プロパティを含まない独自のコンテキストで実行されるため、検索エラーが発生します。

ただし、アロー関数は独自のコンテキストで実行されることはなく、アロー関数を使用して上記の関数を書き直すと...

printGreetings(){
    this.greetings.forEach((greet) => {
        console.log(`${greet} ${this.name}`);
    });
}

結果は期待どおりになります

Good Morning, George
Hello! George
Howdy! George

まとめ

アロー関数の利点を要約します。より短く簡潔なコードが可能になります。関数ブロック コードの暗黙的なリターンを提供します。実行コンテキストの先頭にホイストせず、コード内の正確な位置を維持します。最後に、独自のコンテキストを実行せずに、それを呼び出した関数のコンテキストを継承するため、このキーワードのより予測可能な使用が可能になります。

この投稿が、従来の関数とアロー関数の違いと利点をより深く理解し、JavaScript の旅をさらに一歩進めるきっかけになれば幸いです!

続きを読む:
Dmitri Pavlutin ブログ - アロー関数と通常の関数の違い
MDN リファレンス ドキュメント - アロー関数