先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptの関数で戻り値が複数ある場合って、どうやって扱うんですか？」

先生

「JavaScriptの関数は、一度に一つの値しか戻せません。でも、戻したい値が複数ある場合は配列やオブジェクトにまとめて返す方法があります。」

生徒

「配列やオブジェクトって何ですか？難しそうです…」

先生

「大丈夫です。配列は複数の値を順番にまとめる箱、オブジェクトは名前付きで値をまとめる箱と思ってください。実際の使い方も見てみましょう！」

1. JavaScriptの関数は戻り値が1つだけ

JavaScriptの関数は、returnを使って戻り値を返します。しかし、1回のreturnで返せる値は1つだけです。

例えば、次の関数は数字を一つだけ返します。


function getNumber() {
  return 10;
}
console.log(getNumber()); // 10

では、もし「合計」と「平均」など複数の値を返したい場合はどうするでしょうか？

2. 複数の値を返したいときは「配列」を使う方法

配列は複数の値を順番にまとめるデータの箱です。戻り値を配列にまとめて返すことで、複数の値を扱えます。


function calculateTotalAndAverage(scores) {
  let total = 0;
  for (let score of scores) {
    total += score;
  }
  let average = total / scores.length;
  return [total, average];  // 配列で返す
}

const result = calculateTotalAndAverage([80, 90, 100]);
console.log(result);        // [270, 90]
console.log("合計:", result[0]);
console.log("平均:", result[1]);

このように配列の0番目や1番目の要素として取り出せますが、数字の順番を間違うとわかりにくくなることがあります。

3. 複数の値を返したいときは「オブジェクト」を使う方法

オブジェクトは「名前」と「値」をセットでまとめるデータの箱です。戻り値をオブジェクトにまとめて返すと、値に名前がつくのでわかりやすくなります。


function calculateTotalAndAverage(scores) {
  let total = 0;
  for (let score of scores) {
    total += score;
  }
  let average = total / scores.length;
  return { total: total, average: average };  // オブジェクトで返す
}

const result = calculateTotalAndAverage([80, 90, 100]);
console.log(result);              // { total: 270, average: 90 }
console.log("合計:", result.total);
console.log("平均:", result.average);

このように名前で値を取り出せるので、コードが読みやすくミスも減らせます。

4. オブジェクトの省略記法と分割代入

JavaScriptでは、オブジェクトのキーと変数名が同じときに省略できます。


function calculateTotalAndAverage(scores) {
  let total = 0;
  for (let score of scores) {
    total += score;
  }
  let average = total / scores.length;
  return { total, average };  // 省略形
}

さらに、戻り値のオブジェクトから必要な値だけを取り出す「分割代入」も便利です。


const { total, average } = calculateTotalAndAverage([80, 90, 100]);
console.log("合計:", total);
console.log("平均:", average);

分割代入は、変数に直接値を割り当てられる方法です。

5. 配列で複数の戻り値を返す場合の分割代入

配列で戻り値を返したときも分割代入が使えます。ただし、順番に気をつける必要があります。


const [total, average] = calculateTotalAndAverage([80, 90, 100]);
console.log("合計:", total);
console.log("平均:", average);

配列の場合は順番で値が決まるので、順序を間違えないようにしましょう。

6. まとめ

JavaScriptの関数は戻り値が1つしか返せませんが、配列やオブジェクトにまとめることで複数の値を返すことができます。

配列は順番に値をまとめ、オブジェクトは名前付きで値をまとめるため、用途に合わせて使い分けると良いでしょう。

特にオブジェクトでの戻り値は、コードが読みやすく初心者にもおすすめです。

分割代入を使うと、戻り値から簡単に必要な値だけ取り出せて便利ですよ。

JavaScriptの関数の戻り値が複数ある場合の扱い方