JavaScript：関数とアロー関数

出力 == こんにちは、田中さん

function greet(name) { return ... } の中で return する。呼び出しは console.log(greet("田中"))。

function greet(name) {
  return `こんにちは、${name}さん`;
}

console.log(greet("田中"));

関数の最小形。定義しただけでは何も起きず、呼び出して初めて動く。

解答 == C

「何も返さない」をJavaScriptはどう表すか。

C

戻り値なし＝undefined。この undefined が後の計算に混ざって NaN を生むのが典型的なバグの連鎖。

出力 == 10

const add = (a, b) => a + b; と書く。式1つなので { } と return は不要。

const add = (a, b) => a + b;

console.log(add(3, 7));

アロー関数は矢印 => の右に式を書くだけで、その値が自動的に返る。1行で書ける処理はこの形が読みやすい。

function area(w, h) {
  ____ w * h;
}

console.log(area(3, 4));

出力 == 12

計算結果を呼び出し元へ渡すキーワード。

return

ここを console.log にすると画面には12が出るが、関数の戻り値は undefined になる。使い回すなら return。

解答 == B

画面に出ることと、値が返ることは同じか？

B

画面には10が出るが return が無いので r は undefined。{ } を書いた場合は return を省略できない点にも注意。

出力 == 1100 / 1080（2行）

const withTax = (price, rate = 0.1) => Math.round(price * (1 + rate)); と書く。

const withTax = (price, rate = 0.1) => Math.round(price * (1 + rate));

console.log(withTax(1000));
console.log(withTax(1000, 0.08));

既定値つき引数は「ほとんどの場合は同じ値、たまに変えたい」場面に最適。既定値のある引数は後ろに置くのが原則。

const double = n ____ n * 2;

console.log(double(5));

出力 == 10

アロー関数の矢印。イコールと大なり記号の組み合わせ。

=>

引数が1つならカッコも省略できる。(n) => n * 2 と書いても同じ。

解答 == B

関数の中で作った変数はどこまで生きているか。

B

関数内の変数は関数を抜けると消える（スコープ）。外へ持ち出したければ return するのが唯一の正攻法。

出力 == 合計17 最大9

配列で返す。受け取りは const [total, max] = stats(...) と分割代入する。

const stats = nums => {
  let total = 0;
  for (const n of nums) {
    total += n;
  }
  return [total, Math.max(...nums)];
};

const [total, max] = stats([3, 9, 5]);
console.log(`合計${total} 最大${max}`);

配列で返して分割代入で受け取るのが2値を返す定番。項目が増えるなら { total, max } とオブジェクトで返すほうが順序を気にせず済む。

出力 == 合格 / 不合格（2行）

三項演算子を使えば1行で書ける。

const judge = score => (score >= 60 ? "合格" : "不合格");

console.log(judge(72));
console.log(judge(45));

JS04の条件分岐を関数に閉じ込めた形。判定ロジックを1箇所にまとめておけば、基準が変わってもここだけ直せばよい。

3行。4,800円 → 送料600円 ほか

関数を定義してから for...of で回す。テンプレートリテラルの中で shippingFee(p) を直接呼べる。

const shippingFee = price => (price >= 5000 ? 0 : 600);

for (const p of [4800, 5000, 12000]) {
  console.log(`${p.toLocaleString()}円 → 送料${shippingFee(p)}円`);
}

JS04で書いた送料判定を関数にした形。ループの中で関数を呼ぶと、判定ロジックとループが分離されて読みやすくなる。

出力 == BMI:26.4 → 肥満

return { bmi, judge } のように返し、const { bmi, judge } = bmiCheck(...) で受け取る。小数1桁は toFixed(1)。

const bmiCheck = (height, weight) => {
  const value = weight / height ** 2;

  let judge;
  if (value >= 25) {
    judge = "肥満";
  } else if (value < 18.5) {
    judge = "痩せ";
  } else {
    judge = "標準";
  }

  return { bmi: value.toFixed(1), judge };
};

const { bmi, judge } = bmiCheck(1.72, 78);
console.log(`BMI:${bmi} → ${judge}`);

オブジェクトで返すと受け取り側が順序を気にしなくてよい。JS07の分割代入がここで活きる。項目が3つ以上になったら配列よりオブジェクトが安全。

出力3行が完全一致

エラー条件を先に書いて即 return すると、else を書かずに済む。

const validate = (name, password) => {
  if (!name) {
    return "名前を入力してください";
  }

  if (password.length < 8) {
    return "パスワードは8文字以上にしてください";
  }

  return "OK";
};

console.log(validate("", "abc123"));
console.log(validate("田中", "abc123"));
console.log(validate("田中", "abcd1234"));

早期リターンという書き方。return はその場で関数を抜けるので、else や入れ子の if が消えて一気に読みやすくなる。実務のバリデーションはほぼこの形。

出力3行が完全一致

const finalPrice = (price, isMember = false, hasCoupon = false) => { ... } と定義する。中身はJS04の割引計算と同じ。

const finalPrice = (price, isMember = false, hasCoupon = false) => {
  let total = price;

  if (isMember) {
    total = Math.round(total * 0.9);
  }

  if (hasCoupon) {
    total -= 500;
  }

  if (total < 0) {
    total = 0;
  }

  return total;
};

console.log(`12,000円 → ${finalPrice(12000, true, false).toLocaleString()}円`);
console.log(`12,000円 → ${finalPrice(12000).toLocaleString()}円`);
console.log(`400円 → ${finalPrice(400, false, true).toLocaleString()}円`);

既定値を false にしておくと「普通の客なら引数1つで呼べる」関数になる。よくある呼び方を短く書けるようにするのが良い関数設計。

出力2行が完全一致

return { average, max, passed } で3つ返す。2クラスは [["A組", classA], ["B組", classB]] の配列で回すとループ1本で書ける。平均は toFixed(1)。

const summarize = scores => {
  let total = 0;
  let passed = 0;

  for (const s of scores) {
    total += s;
    if (s >= 60) {
      passed++;
    }
  }

  return {
    average: (total / scores.length).toFixed(1),
    max: Math.max(...scores),
    passed,
  };
};

const classA = [82, 45, 91, 68];
const classB = [70, 55, 88];

for (const [name, scores] of [["A組", classA], ["B組", classB]]) {
  const { average, max, passed } = summarize(scores);
  console.log(`${name} → 平均${average}点 / 最高${max}点 / 合格${passed}人`);
}

同じ関数を違うデータに何度でも使えるのが関数化の最大の利点。クラスが10個に増えてもコードは1行も増えない。passed, のように変数名とキー名が同じなら省略記法が使える点も覚えておきたい。