関数：やることに名前をつける

「お湯をわかして、麺を入れて、3分待って、スープを溶かす」。この手順に「ラーメンを作る」と名前がついているから、わたしたちは「ラーメン作って」のひとことで頼めます。プログラミングでも同じことができます。手順のまとまりに名前をつける——それが関数です。

書いてみよう

function greet() {
  console.log("こんにちは、しまちゃんです！");
}

greet();
greet();

コンソールには、あいさつが2回表示されます。

材料をわたせる：引数

呼び出すときに( )へ材料をわたすと、手順の中で使えます。この材料を引数（ひきすう）と呼びます。

function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}

greet("しまちゃん");
greet("ひよこ");

同じ手順書なのに、「こんにちは、しまちゃんさん！」「こんにちは、ひよこさん！」と結果が変わります。手順は1つ、材料しだいで結果が変わる——関数がぐっと便利になる瞬間です。

結果を返せる：return

計算した結果を呼び出し元に返すこともできます。それがreturnです。

function double(number) {
  return number * 2;
}

let answer = double(5);
console.log(answer);

double(5)は10という結果に化けて、answerにしまわれます。「材料を入れると、加工した結果が出てくる機械」のイメージです。

引数はひとつとは限りません。カンマで区切れば、材料を何個でも渡せます。

function add(a, b) {
  return a + b;
}

console.log(add(3, 4));

aとb、2つの材料を受け取って、足し算した結果を返しています。呼び出すときもadd(3, 4)と、同じ順番で2つ渡します。

じつは、もう使っています

ここまで読んで、見覚えのある形に気づいたでしょうか。しまちゃんのページのscript.jsに、こんなコードを書きましたね。

form.addEventListener("submit", function (event) {
  event.preventDefault();
  thanks.textContent = thanksMessage;
});

このfunction (event) { ... }、まさに関数です。名前をつけずにその場で作って、「submitが起きたらこの手順書を実行してね」とaddEventListenerにわたしていたのです（名前がないので無名関数と呼ばれます）。(event)は引数で、起きたできごとの詳しい情報が入っています。だからevent.preventDefault()と書けたわけです。

このレッスンのまとめ

1. 関数＝名前をつけた手順書。作る（function）と呼び出す（名前()）の2段階
2. ( )で引数（材料）をわたせて、returnで結果を返せる
3. しまちゃんのページのfunction (event)も関数（名前のない無名関数）