【JavaScript】 関数から複数の戻り値を返す方法
更新日:2020/08/04
JavaScriptは関数からの戻り値は一つです。
しかしロジックの都合上、複数の戻り値を返したいことがあります。
その時の代替手段をお伝えします。
分割代入を使用するとスッキリ解決
JavaScriptには分割代入という機能があります。
分割代入は、次のように配列の要素を変数に代入できます。
配列を使った分割代入
const [ a , b , c ] = [ 1 , 2 , 3 ];
または、オブジェクトのメンバを変数に代入できます。
オブジェクトを使った分割代入
const { a , b , c } = { a:1 , b:1 , c:1 };
この機能を活用することで、関数から複数の戻り値を返すことができます。
分割代入については次の記事で詳しく紹介しています。参考にしてください。
参考記事:【JavaScript】 分割代入はどこが便利なのか
配列で戻り値を返して受け取る
関数から配列を返して、受け取り側で変数にセットしてみます。
戻り値を配列で返して受け取る例
function a(){
return [ 1 , 2 , 3 ];
}
const [ c , d , e ] = a();
console.log( c , d , e ); // 1 , 2 ,3
上の例は、次のように分割代入を使用しないで書くことができます。
分割代入を使用しない例
const arry = a();
const c = arry[0];
const d = arry[0];
const e = arry[0];
最初の例の方がスッキリとしていますね。
オブジェクトで戻り値を返して受け取る
次は関数からオブジェクトを返して、受け取り側で変数にセットしてみます。
戻り値をオブジェクトで返して受け取る例
function a(){
return { a:1 , b:2 , c:3 };
}
const { c , a } = a();
console.log( a , c ); // 1 ,3
関数aの戻り値(オブジェクト)から、対応するプロパティを変数に代入しています。
取り出す順番は関係ありません。必要なものだけ取り出せばOKです。
次のようにすると、変数名を変更できます。
変数名を変更する例
const { c:cdata , a:adata } = a();
console.log( adata , cdata ); // 1 ,3
コード内で変数名が重複したり、命名規則と合っていないときに活用します。
JavaScriptの戻り値は一つだけ
ここまでの記事から、分割代入を使用すると複数の戻り値を返すことができるように見えます。
しかし実際に返しているのは、一つの配列やオブジェクトです。
その配列やオブジェクトに対して、分割代入の規則を適用しているのです。
このことを明確に意識しておきましょう。
更新日:2020/08/04
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。