JavaScriptで関数から複数返り値を返す＆受け取るには

JavaScriptで関数を作るとき・・・

１つ以上の返り値を返したり、
呼出し元で複数返り値を受け取ったり、

こういった複数返り値の扱いについて。

コード例とかと一緒にまとめました。

関数の柔軟性を高めるのはもちろん、
外部ライブラリなどを使う時にも役立つ知識です。

このページの目次

複数の返り値は Object を使えば返せる
- 関数内で Object を返して受け取るだけ
それから配列でも複数返り値を受け取れる
ちなみにPHPでの複数返り値について
複数値を返す方法のまとめ

複数の返り値は Object を使えば返せる

複数返り値を返したい場合。

通常は Object を使うことが多いですね。

※ オブジェクト、連想配列とも呼ばれるもの

知らない人は少ないですが、
キーと値をペアにできるデータ型のことです。

▼ Objectの作成コード例

var obj = {
  y: '2020', m: '04', d: '08'
};

var obj = {

y: '2020', m: '04', d: '08'

};

これが複数返り値の受け取りに使えます。

関数内で Object を返して受け取るだけ

そのやり方は超簡単。

ただ関数内でObjectを返して受け取るだけです。

どういうことか例に出すと、以下の通り

まず複数返り値を返す関数定義します。

▼ 例として、こんな関数を作ってみた

/* 配列を半分に分割して返す */
function splitInHalf(arr){
  var len = arr.length;
  return {
    first: arr.slice(0, len/2),
    last: arr.slice(len/2, len)
  };
}

/* 配列を半分に分割して返す */

function splitInHalf(arr){

var len = arr.length;

return {

first: arr.slice(0, len/2),

last: arr.slice(len/2, len)

};

}

やってることはオブジェクトを返してるだけです。

関数側では特別なことはしません。

大事なのは呼出元で受け取るとき

この例だと、こんな受け取り方ができます。

▼ 複数返り値を受け取るコード例

/// ２つに分割される配列
var arr = [1, 2, 3, 4, 5, 6];

/// 複数返り値を受け取り
var {first, last} = splitInHalf(arr);

/// ちなみに返り値の内容
console.log('first : ', first);
  /// => first : (3) [1, 2, 3]
console.log('last : ', last);
  /// => last : (3) [4, 5, 6]

/// ２つに分割される配列

var arr = [1, 2, 3, 4, 5, 6];

/// 複数返り値を受け取り

var {first, last} = splitInHalf(arr);

/// ちなみに返り値の内容

console.log('first : ', first);

/// => first : (3) [1, 2, 3]

console.log('last : ', last);

/// => last : (3) [4, 5, 6]

上コードの var {first, last} という書き方

実はJSだとこういう受け取り方もできるんです。

この例の関数だと {first: [1, 2, 3], last: 4, 5, 6]} が splitInHalf(arr) から返され、その結果を {first 、 last} に収納してる感じですね。

ただしオブジェクトなので、キー名は任意にできません。

必ず返り値のキー名と一致させる必要アリ。

もちろん次みたいな書き方もＯＫです。

▼ 複数返り値を受け取るもう１つの書き方

/// ２つに分割される配列
var arr = [1, 2, 3, 4, 5, 6];

/// 複数返り値を受け取り
var obj = splitInHalf(arr);
var first = obj['first'];
var last = obj['last'];

/// ２つに分割される配列

var arr = [1, 2, 3, 4, 5, 6];

/// 複数返り値を受け取り

var obj = splitInHalf(arr);

var first = obj['first'];

var last = obj['last'];

でもこのコード、次のデメリットがあります。

やたらとコードが冗長になる
返り値用の変数が１つ増える
とにかく回りくどい

もっとスマートに書きたい、
そういう時にオブジェクトを使うと便利ですね。

それから配列でも複数返り値を受け取れる

あと複数返り値を受け取る場合・・・

配列でも似たような受け取り方ができます。

その例を出すなら、こんな感じです。

まず複数返り値を返す関数を作成

▼ たとえば次のような関数

/// 配列から最後尾３つ取り除き、
/// そのあとその３つの要素を返す
function popThreeTimes(arr){
  return [
    arr.pop(), arr.pop(), arr.pop()
  ];
}

/// 配列から最後尾３つ取り除き、

/// そのあとその３つの要素を返す

function popThreeTimes(arr){

return [

arr.pop(), arr.pop(), arr.pop()

];

}

これも単純に配列を返してるだけ

関数自体は何の変哲もありません。

でも返り値の受け取り方。

配列でもこんな受け取り方ができます。

/// 配列の返り値を受け取り
var [n1, n2, n3] = popThreeTimes([1, 2, 3]);

console.log('n1 : ', n1);
  /// => n1 : 6
console.log('n2 : ', n2);
  /// => n2 : 5
console.log('n3 : ', n3);
  /// => n3 : 4

/// 配列の返り値を受け取り

var [n1, n2, n3] = popThreeTimes([1, 2, 3]);

console.log('n1 : ', n1);

/// => n1 : 6

console.log('n2 : ', n2);

/// => n2 : 5

console.log('n3 : ', n3);

/// => n3 : 4

上コードの var [n1, n2, n3] がポイント

これで戻り値用の変数を作らなくてすみました。

コードの可読性とかも少しだけ上がりますね。

ちょっとしたテクニックだけど便利です。

ちなみにPHPでの複数返り値について

蛇足ですが、PHPでも複数返り値は扱えます。

詳しくは次記事に書かかれているのでチェック

PisukeCode - Web開発まとめ

PHPで関数から返り値を”複数返す”には…２つの方法

https://pisuke-code.com/php-multiple-values-from-func

PHPにおいて関数を作るとき、１つ以上の返り値を返したい、呼出元でまとめて返り値を受けたい、こういった複数返り値のやり方について。方法は２つあるので、コード例付きで紹介します。方法１．連想配列を関数から返すやり方これはオーソドックで一般的なやり方です。関数から配列（連想配列）を返す方法。※ ちなみにPHPでは　配列　＝　連想配列具体的な例を出すと、次の通りまず次みたいな関数があるとしましょう。▼ 返り値を連想配列で返す関数function sum_and_avg($nums){ $sum = array_sum($nums); return ;}連想...

JavaScriptと違って方法は２つあります。

複数値を返す方法のまとめ

ではPHPでの複数返り値のまとめ。

箇条書きで簡単にまとめると、こういうことです。

オブジェクトを使って返す
関数内で { x: 100, y: 200 } を返したとしたら、呼び出し元で var {x, y} に直接返り値を代入できる。ただしキー名は関数内と一致させる必要アリ
配列を使って返す
関数内で [1, 2, 3] を返したとしたら、呼び出し元で var [n1, n2, n3] にまとめて返り値を格納できる。返り値用の変数を作らなくてスマートかも