関数に値を渡す

01 / 05

同じ関数で違う結果を出したい

あいさつの関数を作ったとき、名前のところだけ変えたくなったんじゃないかな。「ゆいさん、おはよう」「はるとさん、おはよう」のように。

名前の数だけ関数を作るのは大変だよね。そこで、呼ぶときに値を渡すしくみを使う。渡す値のことを引数（ひきすう）と呼ぶよ。

02 / 05

定義のかっこの中に受け取る名前を書き、呼び出しのかっこの中に渡す値を書く。

呼び出したとき、渡した値が受け取る名前に入って、{ } の中でふつうの変数のように使えるようになるよ。

function greet(name) {  console.log(`${name}さん、おはよう`);}greet("ゆい");greet("はると");

実行結果

ゆいさん、おはよう
はるとさん、おはよう

03 / 05

渡せるのは文字列だけじゃない。数値でも true / false でも、変数に入っている値でも渡せる。

渡した値は { } の中で計算に使える。関数の中身は1つなのに、結果は渡す値の数だけあるということだね。

function showTotal(count) {  console.log(`${count}こで${count * 150}円`);}showTotal(2);showTotal(5);

実行結果

2こで300円
5こで750円

04 / 05

function greet(name) の name は、この関数の中だけで使える名前。外から name と書いても届かないよ。

名前は自分で決めていい。greet(who) にしても動きは同じ。中で何を表す値かが分かる名前にしよう。

渡し忘れるとどうなるかも見ておこう。値が来ないので undefined になるよ。

function greet(name) {  console.log(name);}greet("そら");greet();

実行結果

そら
undefined

05 / 05

アロー関数でも書き方は変わらない。() の中に受け取る名前を書くだけだよ。

これで「渡す → 中で使う」の流れができた。ここから手を動かして慣れよう。

const shout = (word) => {  console.log(`${word}!!`);};shout("やった");shout("できた");

実行結果

やった!!
できた!!