処理をまとめる(関数)

INPUT · スライド

関数から結果を返す

01 / 05

表示するだけでは続きが書けない

ここまでの関数は、中で console.log して終わりだった。でもそれだと計算結果をあとで使うことができない。

合計を出す関数を作っても、その合計に送料を足したり、条件で比べたりできないよね。

結果を呼び出したところへ持ち帰るための言葉が return だよ。

02 / 05

return の形

return 値; と書くと、その値が呼び出したところに返る。返ってくる値のことを戻り値と呼ぶよ。

add(3, 5) と書いた場所が、そのまま 8 に置き換わったと考えると分かりやすい。だから変数に入れることもできるし、そのまま表示することもできる。

function add(a, b) {  return a + b;}const total = add(3, 5);console.log(total);console.log(add(10, 20));

実行結果

8
30

03 / 05

return を書かないと undefined

return を書かない関数を呼ぶと、戻り値は undefined になる。「返す値が決まっていない」という意味だね。

計算はしているのに返していない、というのはよくある書き忘れ。結果が undefined になったら、まず return があるか確かめよう。

function add(a, b) {  a + b;}console.log(add(3, 5));

実行結果

undefined

04 / 05

return したらそこで終わり

return が実行されると、関数はその場で終わる。下に行が残っていても実行されないよ。

この性質を使うと、条件ごとに違う値を返す関数が書ける。else を書かなくても、先に return してしまえば下には進まないんだ。

function judge(score) {  if (score >= 60) {    return "ごうかく";  }  return "ふごうかく";}console.log(judge(72));console.log(judge(40));

実行結果

ごうかく
ふごうかく

05 / 05

表示する関数と、返す関数

console.log する関数と return する関数。この2つは役割が違うよ。

  • 表示する関数 … 画面に出すのが仕事。結果は持ち帰らない
  • 返す関数 … 計算するのが仕事。表示は呼び出した側にまかせる

返す関数のほうが使い回しがきく。表示したければ console.log(add(3, 5)) と書けばいいだけだからね。

それじゃあ、返す関数を書いてみよう。