複数の戻り値を返す方法 | 引数と戻り値 | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

複数の戻り値とは？

JavaScriptの関数は1回のreturnで返せる値は1つだけです。しかし、複数の値を返したい場合は、配列やオブジェクトにまとめて返すのが一般的です。

この方法を使えば、1つの関数から複数のデータをまとめて返せます。現在のJavaScriptでは、分割代入と組み合わせて利用することが多く、実務でもよく使われる書き方です。

配列を使って複数の戻り値を返す方法

配列を使うと、複数の値を順番に返すことができます。呼び出し側では、分割代入を利用すると簡単にそれぞれの値を受け取れます。

配列を使った複数の戻り値の例

function getCoordinates() {
    const x = 10;
    const y = 20;

    return [x, y];
}

const [x, y] = getCoordinates();

console.log(x); // 10
console.log(y); // 20

この例では、getCoordinates()が2つの値を配列として返しています。

• return [x, y]で2つの値を配列にまとめています。
• const [x, y]は配列の分割代入です。
• 1番目の要素がx、2番目の要素がyへ代入されます。

オブジェクトを使って複数の戻り値を返す方法

オブジェクトを使うと、戻り値それぞれに名前を付けることができます。そのため、「何の値なのか」が分かりやすくなり、返す値が多い場合はこちらがよく利用されます。

オブジェクトを使った複数の戻り値の例

function getUserInfo() {
    const name = "Taro";
    const age = 25;

    return { name, age };
}

const { name, age } = getUserInfo();

console.log(name); // Taro
console.log(age); // 25

この例では、ユーザー名と年齢をオブジェクトとして返しています。

• return { name, age }は、{ name: name, age: age }の省略形です。
• const { name, age }はオブジェクトの分割代入です。
• プロパティ名が分かるため、配列よりも可読性が高くなります。

配列とオブジェクトはどちらを使うべき？

返したいデータによって、配列とオブジェクトを使い分けます。

実際の開発では、意味のあるデータを返す場合はオブジェクトを使用することが多くなっています。

配列とオブジェクトを使った応用例

複数の値をまとめて返す方法は、実際のアプリケーションでもよく利用されます。例えば、ユーザー情報や検索結果、計算結果などをまとめて返すことができます。

複合的な応用例

function processUserData() {
    const userName = "Hanako";
    const userAge = 30;
    const scores = [85, 90, 88];

    return {
        userName,
        userAge,
        scores
    };
}

const { userName, userAge, scores } = processUserData();

console.log(userName);
console.log(userAge);
console.log(scores);

この例では、ユーザー情報を1つのオブジェクトとして返しています。

• 名前・年齢・点数をまとめて返しています。
• 呼び出し側では必要な値を分割代入で取り出せます。
• 返す項目が増えても管理しやすくなります。

複数の値を返す際の注意点

JavaScriptでは、次のようにreturnを複数書いても、最初に実行されたものだけが有効になります。

function sample() {
    return 10;
    return 20;
}

console.log(sample()); // 10

そのため、複数の値を返したい場合は、配列やオブジェクトへまとめて返す必要があります。

まとめ

• JavaScriptの関数は1回のreturnで1つの値だけ返します。
• 複数の値を返す場合は、配列またはオブジェクトにまとめます。
• 配列は値の順番に意味がある場合に適しています。
• オブジェクトは値に名前を付けられるため、可読性が高くなります。
• 分割代入を利用すると、返された値を簡単に取り出せます。
• 実務では、意味のあるデータを返す場合はオブジェクトを使うことが多くあります。