アロー関数
このレッスンで分かること
const 名前 = (引数) => { return 値; };でも関数を作れます- 本体が式 1 つなら
{ }とreturnを省略できます
1 行で終わる処理に、function と名前は重い
前のレッスンの関数宣言は、名前を付けて何度も呼ぶ処理のための書き方でした。ですが実際には、1 行で終わる小さな処理や、その場で他の関数に渡して使い捨てる処理がたくさん出てきます。そこに function とキーワードを書き、名前まで考えるのは大げさです。
そこで使うのが => を使うアロー関数です。同じ処理を並べてみます。
JavaScript
// 関数宣言
function yearLabel(year) {
return year + " 年公開";
}
// アロー関数
const yearLabelArrow = (year) => {
return year + " 年公開";
};やっていることは同じで、function が消え、引数と本体のあいだに => が入りました。アロー関数は名前を持ちません。名前を付けたいときは const の変数に入れます。だから末尾にセミコロンが付きます。これは関数の定義ではなく、代入文だからです。
本体が式 1 つなら、{ } ごと消せる
アロー関数の本領は省略にあります。段階を追って短くします。
JavaScript
// 1. 省略なし
const label1 = (year) => {
return year + " 年公開";
};
// 2. 本体が return 1 つだけなら、{ } と return を省略できる
const label2 = (year) => year + " 年公開";
// 3. 引数が 1 つなら丸カッコも省略できる
const label3 = year => year + " 年公開";2 番目を式本体と呼びます。{ } を外すと、矢印の右側に書いた式の結果が、そのまま戻り値になります。ここでの return は省略できるのではなく、書いてはいけません。書くと構文エラーです。
| 状況 | 書き方 |
|---|---|
| 引数なし | () => 値。丸カッコは省略できない |
| 引数 1 つ | (v) => 値 または v => 値 |
| 引数 2 つ以上 | (a, b) => 値。丸カッコは必須 |
| 本体が式 1 つ | return を書かない |
| 本体が複数行 | { } で囲み、return を書く |
{ } を書いたら return が要る、書かなければ return は要らない。この対応で覚えると混乱しません。
定義より前の行では呼べない
関数宣言とアロー関数には、はっきりした違いが 1 つあります。
JavaScript
console.log(hoisted(2026)); // 動く
function hoisted(year) {
return year + " 年公開";
}
console.log(notHoisted(2026)); // エラーになる
const notHoisted = (year) => year + " 年公開";関数宣言はファイルが読み込まれた時点で使える状態になるので、定義より前の行からでも呼べます。アロー関数は const の変数なので、定義の行に届くまで使えません。実務では定義してから使うのが基本なので困る場面はほぼありませんが、このエラーの意味は分かるようにしておいてください。
省略記法は短く書くためではなく、意図がすぐ読めるようにするための道具です。1 行に詰め込みすぎて読み解くのに 10 秒かかるなら、3 行に分けたほうが良いコードです。
よくある間違い
{ }を書いたのにreturnを忘れる — 式本体から書き直したときに起きます。エラーは出ず、undefinedが返ります- 末尾のセミコロンを忘れる — 関数宣言の
}の後ろには要りませんが、アロー関数は代入文なので必要です
要件
- const と アロー関数 (=>) で greet を定義すること
- 引数 name を 1 つ受け取ること
- 文字列
こんにちは、+ name +さんを返すこと - name が空文字列でも、そのまま連結した文字列を返すこと
入出力例
greet("山田 太郎") → "こんにちは、山田 太郎さん"
greet("鈴木 花子") → "こんにちは、鈴木 花子さん"
greet("A") → "こんにちは、Aさん"
greet("") → "こんにちは、さん"ヒント
