④ 処理に名前をつけよう

今回は関数だ。関数は、ひとまとまりの処理に名前をつけて、必要なときに呼び出せるようにする仕組みだよ。

function greet() {
  return 'Hello!';
}

const message = greet();

console.log(message);

greet() と丸括弧をつけると、関数の中が実行されるんですね。

その通り。定義しただけでは何も起きない。呼び出すと中の処理が動き、return に続く値が呼び出した場所へ返る。

値に名前をつけたときと、少し似ています。

いい見方だ。const が値に名前をつけるなら、function は処理に名前をつける。違うのは、呼び出すたびに実行されるところだよ。

呼び出す側から値を渡せる関数も作れる。

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

console.log(add(1, 2));
console.log(add(10, 20));

最初は3、次は30です。同じ処理に違う値を渡せるんですね。

a と b を仮引数、呼び出すときに渡す値を実引数と呼ぶ。入力が引数、出力が戻り値だと考えると、流れを追いやすい。

ただ、このコードはTypeScriptなのに、エディタが a と b に注意を出しています。

よく気づいたね。Parameter 'a' implicitly has an 'any' type. と出ているはずだ。引数にどんな値が渡ってくるのか、どこにも書かれていないからだよ。

これまでは、何も書かなくても平気でした。

これまでは const price = 800; のように、右側に値があった。TypeScriptはそれを見て判断できる。でも関数の入口には、まだ値が来ていない。

解決方法は少し先で扱う。まずは、関数が「入力を受け取り、処理し、結果を返す」という流れをつかもう。次は、値をまとめて扱う方法だ。