関数を作成するための非常にシンプルで簡潔な構文がもう 1 つあり、多くの場合、関数式よりも優れています。
次のようになっているため、これは「アロー関数」と呼ばれます。
let func = (arg1, arg2, ..., argN) => 式;
これは、引数arg1..argNを受け取る関数funcを作成し、それを使用して右側のexpressionを評価し、その結果を返します。
言い換えれば、これは次の短縮版です。
let func = function(arg1, arg2, ..., argN) {
式を返します。
};具体的な例を見てみましょう。
sum = (a, b) => a + b とします。
/* このアロー関数は次の短縮形です。
let sum = function(a, b) {
a + b を返します。
};
*/
アラート( sum(1, 2) ); // 3ご覧のとおり、 (a, b) => a + b aとbという名前の 2 つの引数を受け入れる関数を意味します。実行時に、式a + bを評価し、結果を返します。
引数が 1 つだけの場合は、パラメータを囲む括弧を省略して、引数をさらに短くすることができます。
例えば：
double = n => n * 2 とします。
// ほぼ同じです: let double = function(n) { return n * 2 }
アラート( double(3) ); // 6引数がない場合、括弧は空ですが、必ず存在する必要があります。
let SayHi = () =>alert("こんにちは!");
こんにちは();アロー関数は関数式と同じように使用できます。
たとえば、関数を動的に作成するには:
let age = プロンプト("あなたの年齢は何ですか?", 18);
ようこそ = (年齢 < 18) ?
() => アラート('こんにちは!') :
() =>alert("こんにちは!");
いらっしゃいませ（）;矢印関数は最初は見慣れず、あまり読みにくいように見えるかもしれませんが、目が構造に慣れるとすぐに変わります。
これらは、多くの単語を書くのが面倒な場合に、単純な 1 行のアクションに非常に便利です。
これまで見てきたアロー関数は非常に単純なものでした。これらは=>の左側から引数を取得し、それを評価して右側の式を返します。
場合によっては、複数の式やステートメントを含む、より複雑な関数が必要になることがあります。その場合は、中括弧で囲むことができます。主な違いは、中かっこでは値を返すためにその中にreturn必要であることです (通常の関数と同様)。
このような：
let sum = (a, b) => { // 中括弧は複数行の関数を開きます
結果 = a + b とします。
結果を返します。 // 中括弧を使用する場合は、明示的な「return」が必要です
};
アラート( sum(1, 2) ); // 3さらに今後も
ここでは、アロー関数の簡潔さを賞賛しました。しかしそれだけではありません！
アロー関数には他にも興味深い機能があります。
これらを詳しく調べるには、まず JavaScript の他の側面を理解する必要があるため、アロー関数については、後の「アロー関数の再検討」の章で戻ります。
現時点では、すでにアロー関数を 1 行のアクションとコールバックに使用できます。
アロー関数は、単純なアクション、特にワンライナーの場合に便利です。 2 つの種類があります。
中括弧なし: (...args) => expression – 右側は式です。関数はそれを評価し、結果を返します。引数が 1 つだけの場合は、括弧を省略できます (例: n => n*2 。
中括弧を使用する場合: (...args) => { body } – 括弧を使用すると関数内に複数のステートメントを記述できますが、何かを返すには明示的なreturnが必要です。
以下のコード内の関数式をアロー関数に置き換えます。
関数 ask(質問、はい、いいえ) {
if (確認(質問)) はい();
それ以外の場合はいいえ();
}
聞く（
"同意しますか？"、
function() {alert("あなたは同意しました。"); }、
function() {alert("実行がキャンセルされました。"); }
);関数 ask(質問、はい、いいえ) {
if (確認(質問)) はい();
それ以外の場合はいいえ();
}
聞く（
"同意しますか？"、
() =>alert("あなたは同意しました。"),
() =>alert("実行がキャンセルされました。")
);短くてすっきりして見えますよね？