処理をまとめる(関数)

INPUT · スライド

関数を変数に入れる

01 / 04

関数は値でもある

前のレッスンで定義した関数、実は値のひとつなんだ。数値や文字列と同じように扱える。

試しに () を付けずに console.log へ渡してみると、「これは関数だよ」と返ってくる。() を付けると中身が動き、付けないと関数そのものを指すよ。

function hello() {  console.log("やあ");}console.log(hello);hello();

実行結果

function
やあ

02 / 04

変数に入れる書き方

値なら変数に入れられる。const 名前 = function() { 処理 }; と書く形を関数式と呼ぶよ。

function のうしろに名前を書かないのがポイント。名前は変数のほうが持っている。値を入れる文なので、最後の } のあとに ; を付けるのも忘れずに。

const greet = function() {  console.log("おはよう");};greet();

実行結果

おはよう

03 / 04

呼び出し方は同じ

呼び出すときは greet() と書くだけ。前のレッスンの書き方(関数宣言)とまったく同じだね。

違うのは定義より前では呼べないこと。関数式は「変数に値を入れる」文だから、その行を通り過ぎるまで中身が決まっていないんだ。

上から「定義 → 呼び出し」の順に書いておけば迷わないよ。

const cheer = function() {  console.log("がんばれ");};cheer();cheer();

実行結果

がんばれ
がんばれ

04 / 04

どっちを使えばいい

今のところはどちらでも動くと思って大丈夫。違いはこれくらいだよ。

  • 関数宣言function 名前() { }。素直で読みやすい
  • 関数式const 名前 = function() { };。関数が値だとはっきり見える

関数式の形に慣れておくと、次に出てくる短い書き方がすんなり入る。まずは書き換えて手になじませよう。