JavaScriptの戻り値（return）：関数から値を返す

引数に続いて、「戻り値（もどりち）」を学びました。戻り値を使うことで、関数の処理結果を呼び出し元で受け取り、さらに別の処理に使うことができます。

戻り値とは

戻り値は、関数の処理結果を呼び出し元で受け取る値のことです。関数が値を返すことを「関数が戻り値を返す」と言います。

returnなしの関数

const add = (a, b) => {
  const result = a + b;
  console.log(result);
};

add(3, 5);  // 8（コンソールに表示されるだけ）

この関数は結果を表示するだけで、値を返していません。

returnありの関数

const add = (a, b) => {
  const result = a + b;
  return result;
};

const answer = add(3, 5);
console.log(answer);  // 8

return を使うことで、計算結果を変数に代入したり、他の処理に使えるようになります。

returnの基本構文

構文: return 値

const double = (num) => {
  return num * 2;
};

const result = double(5);
console.log(result);  // 10

関数の中で return 値 と書くと、その値が戻り値として返されます。

戻り値を定数に代入できる

return で返された値は、定数や変数に代入できます。

const calculateTax = (price) => {
  const tax = price * 0.1;
  return tax;
};

// 戻り値を定数に代入
const taxAmount = calculateTax(1000);
console.log(`税額: ${taxAmount}円`);  // 税額: 100円

これが console.log() との大きな違いです。console.log() は表示するだけですが、return は値を返すため、その値を使ってさらに処理を続けられます。

console.log()とreturnの違い

console.log()：表示するだけ

const add = (a, b) => {
  console.log(a + b);
};

add(3, 5);  // 8（表示される）

// ❌ 値を受け取れない
const result = add(3, 5);
console.log(result);  // undefined

console.log() は値を表示するだけで、値を返さないため、結果を受け取れません。

return：値を返す

const add = (a, b) => {
  return a + b;
};

// ✅ 値を受け取れる
const result = add(3, 5);
console.log(result);  // 8

return を使えば、結果を受け取って別の処理に使えます。

戻り値をさらに使う

戻り値は、別の計算や関数の引数として使えます。

const calculateTax = (price) => {
  return price * 0.1;
};

const calculateTotal = (price) => {
  const tax = calculateTax(price);  // 関数の戻り値を使う
  return price + tax;
};

const total = calculateTotal(1000);
console.log(`合計: ${total}円`);  // 合計: 1100円

条件式を戻り値として返す

if文のような条件式を戻り値として返すと、真偽値（true/false）として返ってきます。

const isAdult = (age) => {
  return age >= 18;
};

console.log(isAdult(20));  // true
console.log(isAdult(15));  // false

条件式の結果（真偽値）がそのまま戻り値になります。

実用例：条件による処理の切り替え

const isAdult = (age) => {
  return age >= 18;
};

const age = 20;

if (isAdult(age)) {
  console.log("成人です");
} else {
  console.log("未成年です");
}
// 成人です

戻り値を条件判定に使うことで、コードが読みやすくなります。

returnは関数の処理を終了させる

return には、関数の処理を終了させる性質もあります。

const checkAge = (age) => {
  if (age < 0) {
    return "年齢が不正です";
  }
  
  if (age < 18) {
    return "未成年です";
  }
  
  return "成人です";
};

console.log(checkAge(15));  // 未成年です
console.log(checkAge(25));  // 成人です
console.log(checkAge(-5));  // 年齢が不正です

return が実行されると、その時点で関数が終了し、それ以降のコードは実行されません。

const sample = () => {
  console.log("1番目");
  return;
  console.log("2番目");  // これは実行されない
};

sample();
// 1番目

returnがない関数はundefinedを返す

return を書かない関数は、自動的に undefined を返します。

const greet = () => {
  console.log("こんにちは");
  // returnがない
};

const result = greet();
console.log(result);  // undefined

アロー関数の省略記法

アロー関数では、処理が1行で戻り値を返すだけの場合、return と {} を省略できます。

// 通常の書き方
const double = (num) => {
  return num * 2;
};

// 省略形（returnと{}を省略）
const double = (num) => num * 2;

console.log(double(5));  // 10（どちらも同じ結果）

この省略形は、実務でよく使われます。

Pythonとの比較

項目PythonJavaScript
戻り値の返し方return 値return 値
returnなしNone を返すundefined を返す
処理の終了return で終了return で終了
# Python
def add(a, b):
    return a + b

result = add(3, 5)
print(result)  # 8

// JavaScript
const add = (a, b) => {
  return a + b;
};

const result = add(3, 5);
console.log(result);  // 8

基本的な考え方は同じですが、JavaScriptでは戻り値がない場合に undefined が返される点が違います。

今日の学びのポイント

  • 戻り値: 呼び出し元で受け取る処理結果
  • return 値: 関数が値を返す
  • 戻り値は定数や変数に代入できる
  • 条件式を返すと真偽値（true/false）になる
  • return は関数を終了させる（以降のコードは実行されない）
  • return がないと undefined が返される
  • アロー関数では省略形も使える

戻り値は、関数を強力にする重要な概念です。次は、変数や定数が使える範囲「スコープ」を学びます。

コメント