処理をまとめる(関数)

INPUT · スライド

戻り値をそのまま使う

01 / 04

一度変数に入れなくていい

const t = add(3, 5); console.log(t); と書いてきたけれど、add(3, 5)それ自体が値。変数を通さずそのまま使えるよ。

add(3, 5) と書いた場所が 8 に置き換わる、とイメージしよう。数値や文字列を書ける場所なら、どこにでも書ける。

function add(a, b) {  return a + b;}console.log(add(3, 5) + 100);console.log(`ごうけい${add(3, 5)}円`);

実行結果

108
ごうけい8円

02 / 04

if の条件に入れる

true / false を返す関数を作ると、if の条件にそのまま書ける。

うれしいのは、条件の意味が関数の名前で読めるようになること。if (n % 2 === 0) より if (isEven(n)) のほうが、何を調べているか一目で分かるよね。

function isEven(n) {  return n % 2 === 0;}for (let i = 1; i <= 4; i++) {  if (isEven(i)) {    console.log(`${i} ぐうすう`);  } else {    console.log(`${i} きすう`);  }}

実行結果

1 きすう
2 ぐうすう
3 きすう
4 ぐうすう

03 / 04

関数の結果を関数に渡す

戻り値は値だから、別の関数の引数にもできるdouble(double(3)) と書けば、内側から順に計算されるよ。

  • 内側の double(3)6 になる
  • 外側が double(6) になって 12 になる

入れ子は内側から。読むときも内側から追っていこう。

function double(n) {  return n * 2;}console.log(double(double(3)));console.log(double(5) + double(10));

実行結果

12
30

04 / 04

小さい関数を組み合わせる

関数はひとつで全部やろうとしなくていい。小さく作って組み合わせるほうが、直すのも読むのも楽になる。

  • 送料を出す関数
  • 小計を出す関数
  • その2つを足して表示する行

こう分けておけば、送料のルールが変わっても直すのは1か所だけ。ここまで来たら、もう自分でプログラムを組み立てられるよ。書いて確かめよう。

function shipping(total) {  if (total >= 1000) {    return 0;  }  return 300;}const price = 800;console.log(`しはらい${price + shipping(price)}円`);

実行結果

しはらい1100円