JavaScript で複数の値を返す
通常、関数は大文字と小文字を区別して終了します。リターンケースには値がある場合と、渡すものがない場合があります。
JavaScript では、複数の値を返す関数はサポートされていません。したがって、複数の値をパックして関数を介して渡すことができるようにするには、配列とオブジェクトを利用します。
ここでは、配列を使用して複数の関数値を格納する方法を示します。その後、オブジェクトを使用して関数値を収集する方法についても説明します。
さらに、破棄割り当てと一般変数宣言を使用して関数値をアンパックする方法も理解します。
JavaScript の配列を持つ関数から複数の値を返す
この場合、getValue 関数には 2つの変数があり、それらを配列として渡して返します。
新しい変数 feature 宣言は、関数の戻り値を配列の形式で格納します。他の配列トラバースと同様に、インデックスを使用して値にアクセスできます。
もっと簡単に言えば、ここでの feature は、配列形式で getValues 関数から返された同期値を取得する別の配列です。
コードスニペット：
function getValues() {
var hair = 'Short', color = 'Black';
return [hair, color];
}
var feature = getValues();
var x = feature[0];
var y = feature[1];
console.log(x + ' ' + y + ' Hair');
出力：
Destructing Assignment を使用してアレイを解凍する
一般に、配列要素を格納する変数またはオブジェクトを簡単に宣言できます。しかし、大きなデータに対して毎回 var を定義するのは面倒です。
配列をループして値にアクセスすることもできます。それ以外に、ES6 には、以下の例のように配列要素をアンパックするための新しい追加機能があります。
コードスニペット：
function getValues() {
var hair = 'Short', color = 'Black';
return [hair, color];
}
var [x, y] = getValues();
console.log(x + ' ' + y + ' Hair');
出力：
JavaScript のオブジェクトを持つ関数から複数の値を返す
キーと値のペアを簡単に作成して、オブジェクトを使用してデータを構造化できます。このサンプルドライブでは、関数 getValues を再度初期化します。今回は、リターンケースがオブジェクト形式になります。
コードスニペット：
function getValues() {
var hair = 'Long', color = 'Brown';
return {hair, color};
}
var feature = getValues();
var x = feature.hair;
var y = feature.color;
console.log(x + ' ' + y + ' Hair');
出力：
ここのコードブロックには、オブジェクトとして機能する変数 feature があります。後で dot(.) メソッドとともに、キーを呼び出して値にアクセスします。
この map にはキー名が明示的に必要であるため、対応する値がフロアを取得します。
Destructing Assignment を使用してオブジェクトを解凍する
関数から渡されたオブジェクトは、ES6 規則 destructing assignment を宣言することで解凍できます。
ここでは、キーを明示的に宣言しますが、宣言は関数から直接値のペアにアクセスします。コードブロックを確認してみましょう。
コードスニペット：
function getValues() {
var hair = 'Long', color = 'Brown';
return {hair, color};
}
var {hair, color} = getValues();
console.log(hair + ' ' + color + ' Hair');
出力：
ご覧のとおり、関数からキーを渡したところです。キー名を使用してそれらを解凍すると、出力には対応する値も表示されます。
