英文地址: https://javascript.plainenglish.io/demystifying-javascript-arrow-functions-7b2a0908a2b3
掘金の翻訳プロジェクトを通じて翻訳
矢印関数は、関数式の代替方法ですが、構文的には異なり、すべての場合に使用することはできません。JavaScript の関数式についてまだ読んでいない場合は、この記事を先に読むことをお勧めします。
さて、矢印関数を構文、実行、スコープと巻き上げ、およびコードの例から理解しましょう。
1. 構文#
const arrowFunctionSyntax = () => {
console.log('こんにちは、私は矢印関数です');
};
arrowFunctionSyntax();
上記のコード例では、矢印関数は関数式に似ていますが、変数に割り当てられる点が異なります。主な違いは関数の書き方です。以下は、上記のコードから得られる観察結果です：
- function キーワードは含まれていません。
- 関数名がありません。つまり、これらは匿名関数です。
- 矢印
=>記号が導入されています。
const arrowFunctionWithOneParam = (number) => number + 1;
const arrowFunctionWithMultipleParams = (numberOne, numberTwo) => {
let sum = numberOne + numberTwo;
return sum;
};
console.log(arrowFunctionWithOneParam(5));
console.log(arrowFunctionWithMultipleParams(5, 6));
arrowFunctionWithOneParam と arrowFunctionWithMultipleParams を同時に観察すると、括弧 ()、ブロック {}、および return キーワードの使用の違いに気付くことができます。矢印関数の構文によれば、関数が 1 つのパラメーターのみを受け取る場合、括弧 () を省略することができます。関数が 1 つの文のみを含む場合、ブロック {} を省略することもできます。最後に、関数が 1 つの文のみを含む場合、return を省略することもできます。
2. 実行#
const arrowFunctionExecution = () => {
console.log('こんにちは、私の実行は通常の関数と似ています');
};
arrowFunctionExecution();
矢印関数の実行は、他の通常の関数の実行と似ています。JS エンジンが arrowFunctionExecution() を実行すると、関数が作成され、実行コンテキストが作成され、呼び出しスタックにプッシュされます。実行コンテキストが作成されると、作成フェーズが開始されます。このフェーズでは、パラメーターオブジェクトが作成され、すべての変数がローカルメモリヒープに宣言されます。
通常の関数との主な違いは、this の宣言です。矢印関数には独自の this 変数はありません。矢印関数内で this を使用すると、レキシカルスコープが適用されます。作成フェーズの後、実行フェーズが開始されます。この時点で、console.log() ステートメントが実行され、"こんにちは、私の実行は通常の関数と似ています" がコンソールに出力されます。
3. スコープ#
const arrowFunctionScope = () => {
console.log('こんにちは、私のスコープルールは関数式と同じです');
};
これらの関数は、他の関数式と同じスコープルールに従います。これらの関数には独自のスコープがあり、関数内で宣言された変数は関数外からアクセスできません。これらの関数は call、apply、bind メソッドにも適用されません。これらのメソッドは通常、スコープに依存します。JavaScript のスコープについてまだ読んでいない場合は、この記事をお勧めします。
4. 巻き上げ#
amIGoingToBeHoisted();
var amIGoingToBeHoisted = () => {
console.log('答えはNOです');
};
矢印関数は巻き上げられません。これは関数式であり、関数が変数に割り当てられるためです。JavaScript エンジンが上記のコードを実行すると、作成フェーズで var amIGoingToBeHoisted の宣言文がトップに移動し、値 undefined で初期化され、初期値が後ろに残ります。実行フェーズでは、amIGoingToBeHoisted ステートメントに遭遇すると、関数の型ではないため、タイプエラーがスローされます。JavaScript の巻き上げについての詳細は、記事をお読みください。