アロー関数
今まで見てきた関数式は => という記号を使った「 アロー関数 」というものに書き換えることができます。
例えば、入力された3つの値を足して返すという関数があったとします。
let sum = function(a, b, c) {
return a + b + c;
};
let total = sum(10, 20, 30);
console.log(total);これをアロー関数を使って書き換えると、以下のようになります。
let sum = (a, b, c) => a + b + c;
let total = sum(10, 20, 30);
console.log(total);それでは、書き換える手順を確認します。
| 手順 | 結果 |
|---|---|
| 書き換え前 | let sum = function(a, b, c) { |
| ①functionを削除 | let sum = (a, b, c) { |
②=> をつける |
let sum = (a, b, c) => { |
| 処理の中身がreturnだけの場合③へ | 処理の中身がreturnだけの場合③へ |
③{}; と returnを削除 |
let sum = (a, b, c) => a + b + c; |
| さらに引数が一つの場合④へ | さらに引数が一つの場合④へ |
④引数の () を削除 |
let sum = a => a + b + c; |
④の引数が一つの場合というのを確認するために 「値を2倍にして返す関数」 を作成して確認してみましょう。
let double = function(a) {
return a * 2;
};
let result = double(10);
console.log(result);アロー関数に書き換えると、以下のようになります。
今回は引数が一つなので④まで進んだ形で書きます。
let double = a => a * 2;
let result = double(10);
console.log(result);アロー関数を使って、短く表現する方法はよく使われているので慣れておくと良いと思います。
関数宣言と関数式
JavaScriptで 「関数を書く」 となった場合、実は2つのパターンがあります。
関数宣言
まず、パッと思いつく関数の形は次のようなものだと思います。
これは 関数宣言 という書き方です。
function 関数名(仮引数, 仮引数) {
処理...
return;
}関数式
アロー関数のところでもさりげなく出てきましたが、以下のように変数に関数を入れるという書き方があります。
これは 関数式 という書き方です。
let 変数名 = function(仮引数, 仮引数) {
処理...
return;
};この書き方は、 変数に関数を代入する という式の扱いになるので最後の セミコロン を忘れずに注意してください。
さらに、よく見ると関数式の方には function の後に関数名がありません。
このような形を 「無名関数」 と呼びます。
少し細かい話にはなりますが、関数式の function の後に名前をつけることも可能です。
名前をつけておくと、 エラーが起きた時にエラーの発生源を特定しやすくなる というメリットがあります。
