JavaScriptのアロー関数を深く理解する_基礎知識

最初の JavaScript では、矢印は HTML コメントでインライン スクリプト コードをラップすることが推奨されていました。これにより、JavaScript をサポートしていないブラウザでコードがエラーで表示されるのを防ぐことができます。次のようなコードを記述した可能性があります:

<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>
 
<script language="javascript">
<!--
  document.bgColor = "brown"; // red
// -->
</script>

古いブラウザには、サポートされていない 2 つのタグと 1 つのコメントが表示されますが、JavaScript をサポートする新しいブラウザのみが JavaScript コードとして解析します。

この奇妙な機能をサポートするために、ブラウザの JavaScript エンジンは fb11be9ada14a957bdeb34154e0499c8 タグ内の最初の行だけでなく、Node 内であっても JavaScript コード内のどこでも使用できます。

偶然にも、このスタイルのコメントは ES6 で初めて標準化されました。しかし、それは私たちが話そうとしている矢ではありません。

--> も 1 行のコメントを表します。HTML では --> より前の部分がコメントの内容ですが、JavaScript では --> の後の行がコメントです。 。

--> が行の先頭にある場合のみ、--> は演算子 (gos to) であるため、矢印がコメントであることを示します。

function countdown(n) {
 while (n-->0) // "n goes to zero"
  alert(n);
 blastoff();
}
 
function countdown(n) {
 while (n-->0) // "n goes to zero"
  alert(n);
 blastoff();
}

上記のコードは実際に実行できます。 n が 0 になるまでループするのは ES6 の新しい機能ではありませんが、おなじみの機能と組み合わせると、非常に誤解を招きます。上記のコードがどのように機能するか理解できますか?答えは Stack Overflow で見つけることができます。

もちろん、矢印、つまり以下演算子 0dffc650d8702223b8edbbfb2bf5631e とはどういう意味ですか?この記事ではこれについて説明します。

まず、機能について説明します。
ユビキタス関数式

JavaScript の興味深い特徴は、関数が必要なときにいつでも簡単に作成できることです。

たとえば、クリック イベントをボタンにバインドするには:

$("#confetti-btn").click(
 
$("#confetti-btn").click(

jQuery の .click() メソッドにはパラメータとして関数が必要です。
で関数を簡単に作成できます。

$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

 
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

このようなコードを書くことは、今では私たちにとって最も自然なことです。しかし、JavaScript が普及する前は、他の言語にはそのような機能がなかったため、このスタイルのコードはまだ少し奇妙に見えました。 1958 年、Lisp にはラムダ関数とも呼ばれる関数式がありました。これは C、Python、C#、Java には長年存在しなかった機能です。

これら 4 つの言語にはすべてラムダ式があり、新しい言語には通常、組み込みのラムダ式があります。ラムダ式に大きく依存するライブラリの開発者のおかげで、JavaScript はこの機能をサポートするようになり、広く採用されるようになりました。

JavaScript は、他のいくつかの言語と比較して、やや冗長な構文を持っています。

// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java
 
// A very simple function in six languages.
function (a) { return a > 0; } // JS
[](int a) { return a > 0; } // C++
(lambda (a) (> a 0)) ;; Lisp
lambda a: a > 0 # Python
a => a > 0 // C#
a -> a > 0 // Java

アロー関数

ES6 では、関数を記述するための新しい構文が導入されています:

// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

 
// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});
 
// ES6
var selected = allJobs.filter(job => job.isSelected());

パラメーターが 1 つだけの関数が必要な場合は、アロー関数の構文を Identifier => Expression に単純化し、関数と return キーワード、括弧と末尾のセミコロンを直接省略します。

複数の (またはパラメーターなし、または残りのパラメーターとパラメーターのデフォルト値、または構造化されていないパラメーター) パラメーターを含む関数を作成するには、パラメーターを括弧で囲む必要があります。

// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);
 
// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);
 
// ES6
var total = values.reduce((a, b) => a + b, 0);

アロー関数は、Underscore.js や Immutable などの一部のツール関数ライブラリでも完全に動作します。実際、Immutable ドキュメントのサンプルはすべて ES6 で書かれており、その多くはすでにアロー関数を使用しています。

関数本体での式の使用に加えて、アロー関数にはステートメント ブロックを含めることもできます。前述の例を思い出してください。

// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});
 
// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});

アロー関数の書き方は以下の通りです:

// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});
 
// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});

ステートメント ブロックを使用するアロー関数は自動的に値を返さないことに注意してください。値を返すには return を明示的に使用する必要があります。

もう 1 つアドバイスとして、アロー関数を使用してオブジェクトを返すときは、返されたオブジェクトを常に括弧で囲んでください。

// create a new empty object for each puppy to play with
var chewToys = puppies.map(puppy => {});  // BUG!
var chewToys = puppies.map(puppy => ({})); // ok

 
// create a new empty object for each puppy to play with
var chewToys = puppies.map(puppy => {});  // BUG!
var chewToys = puppies.map(puppy => ({})); // ok

空のオブジェクト {} と空のステートメント ブロック {} はまったく同じに見えるため、ES6 は常に => の直後にある { をオブジェクトの先頭ではなくステートメント ブロックの先頭として扱います。 {} は関数本体のないアロー関数として解析され、戻り値は未定義です。