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

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

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

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

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

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

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

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

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

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

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

▼ Objectの作成コード例

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

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

そのやり方は超簡単。

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上、JavaScriptでの複数返り値のやり方でした。(^^)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください