Day 3・関数とオブジェクト — 処理とデータをまとめる

関数 — 入力から出力を作る小さな機械

引数を受け取り、処理して、戻り値を返す。関数の基本形と「なぜ関数に切り出すのか」を学ぶ。

関数は「入力 → 処理 → 出力」の箱

関数とは、ある入力を受け取って、決まった処理をして、結果を返す小さな機械です。自動販売機を思い浮かべてください。お金とボタン(入力)を渡すと、中で処理が動いて、ジュース(出力)が出てきます。中の仕組みを知らなくても、入力と出力さえ分かれば使えます。関数もこれと同じで、名前を付けておけば何度でも呼び出せます。

JAVASCRIPT

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

add(2, 3); // 5

add は「2つの数を受け取り、足した結果を返す」関数

add(a, b) のカッコの中にある a と b が引数(ひきすう)です。関数に渡す入力の受け皿だと思ってください。呼び出すときに add(2, 3) と書くと、a に 2、b に 3 が入ります。そして return の後ろに書いた値が戻り値(もどりち)、つまり出力です。

JAVASCRIPT

function greet(name) {
  return "やあ、" + name + "さん";
}

const message = greet("太郎"); // "やあ、太郎さん"
console.log(message);

引数 name を受け取り、あいさつ文を作って return で返す

なぜ関数に切り出すのか

同じ処理を何度も書く代わりに、一度関数にまとめれば呼び出すだけで再利用できます。さらに greet や calcTax のような名前を付けることで「ここは何をしているか」が名前だけで伝わります。処理に名前を付けて意図を残すこと、これが関数の一番の価値です。

return を忘れると undefined が返る

関数の中で計算しても、return を書かなければ結果は外に返りません。その場合その関数の戻り値は undefined になります。「関数を呼んだのに結果が空っぽ」というときは、まず return があるかを確認しましょう。

同じ処理をコピペ

税込み計算を何度も手書きすると、直すとき全部直す羽目になる

JAVASCRIPT

const priceA = 100 + 100 * 0.1;
const priceB = 200 + 200 * 0.1;
const priceC = 300 + 300 * 0.1;

関数にまとめる

1か所直せば全部に反映され、名前で意図も分かる

JAVASCRIPT

function withTax(price) {
  return price + price * 0.1;
}
const priceA = withTax(100);
const priceB = withTax(200);

引数: 関数に渡す入力の受け皿。カッコの中に書く
戻り値: return の後ろに書いた出力。呼び出し元が受け取る
関数に切り出す理由は「再利用」と「名前で意図を残す」の2つ

AIにはこう聞く

「税込み価格を計算する関数を書いて。引数は税抜き価格、戻り値は税込み価格で」のように、引数と戻り値を指定して頼むと、意図どおりの関数が返ってきます。読むときは「入力は何で、何を返すか」だけ追えば十分です。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

function double(n) { return n * 2; } を double(4) と呼び出したとき、戻り値はどれ?

関数の中で計算はしているのに return を書かなかった。呼び出し元が受け取る戻り値はどれ?

同じ処理を何度も書く代わりに関数に切り出すと、どんな利点がありますか。2つ挙げて説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。