01 / 04
1回しか使わないのに名前が要る?
ここまでは「関数を作って変数に入れる → その変数を渡す」の2段階で書いてきた。
でも1回しか渡さない関数に名前を付けるのは、ちょっともったいない。名前を考えるのも手間だし、上の行と下の行を行き来して読むことになる。
実は引数を書く場所に、関数をそのまま書けるんだ。
const doTask = (task) => { task();};doTask(() => { console.log("そうじした");});実行結果
そうじした
関数をわたす
INPUT · スライド
その場で関数を書く
01 / 04
1回しか使わないのに名前が要る?
02 / 04
書き換えの手順
やっていることは前と同じ。手順は2つだけだよ。
const 名前 =を消す- 残った
() => { ... }を引数を書く場所に置く
最後が }); と閉じかっこ2つ並ぶのが見慣れないところ。でも } が関数の終わり、) が呼び出しの終わりと分けて読めば迷わないよ。
const twice = (fn) => { fn(); fn();};twice(() => { console.log("ピッ");});実行結果
ピッ ピッ
03 / 04
配列メソッドでもこの形
forEach や map に渡す関数も、その場に書ける。実際のコードではこの形をいちばんよく見かけるよ。
名前を付けずに書くので、その場かぎりの処理だとひと目で分かるのもいいところ。
const nums = [1, 2, 3];nums.forEach((n) => { console.log(n * 10);});実行結果
10 20 30
04 / 04
どっちで書けばいい?
答えは「読みやすいほう」。目安はこれくらいだよ。
- その場に書く … 数行で終わる、1回しか使わない
- 名前を付ける … 何度も渡す、中身が長い、名前を読めば意味が分かる
どちらでも動くから、迷ったら名前を付けておけばいい。あとから短くするのは簡単だよ。
それじゃあ、その場に書く形を練習しよう。