【JavaScript】 関数から複数の戻り値を返す方法

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

コード内で変数名が重複したり、命名規則と合っていないときに活用します。

ここまでの記事から、分割代入を使用すると複数の戻り値を返すことができるように見えます。

しかし実際に返しているのは、一つの配列やオブジェクトです。

その配列やオブジェクトに対して、分割代入の規則を適用しているのです。

このことを明確に意識しておきましょう。