関数から複数の値を返す

概要: このチュートリアルでは、複数の値を返すJavaScript関数を定義する方法を学びます。

JavaScript関数は単一の値を返すことができます。関数から複数の値を返すには、戻り値を配列の要素として、またはオブジェクトのプロパティとしてパックできます。

配列を使用して関数から複数の値を返す

次のgetNames()関数は、バックエンドのデータベースまたはサードパーティAPI呼び出しの結果から、名と姓を取得し、それらを配列の要素として返すことを想定しています。

function getNames() {
    // get names from the database or API
    let firstName = 'John',
        lastName = 'Doe';

    // return as an array
    return [firstName, lastName];
}Code language: JavaScript (javascript)

以下は、getNames()関数から戻り値を取得する方法を示しています。

let names = getNames();Code language: JavaScript (javascript)

names変数は配列であるため、次のように角かっこを使用して要素を参照できます。

const firstName = names[0],
      lastName  = names[1];Code language: JavaScript (javascript)

ES6では、分割代入構文を使用して、配列から値をより直感的に展開できます。例えば次のようになります。

const [firstName, lastName] = getNames();Code language: JavaScript (javascript)

このコードでは、firstName変数とlastName変数は、戻り値の配列の最初と2番目の要素を受け取ります。

オブジェクトを使用して関数から複数の値を返す

返された各値に名前を付けて、より読みやすく、保守しやすくしたい場合は、オブジェクトを使用できます。

function getNames() {
  // get names from the database or API
  let firstName = 'John',
      lastName = 'Doe';

  // return values
  return {
    'firstName': firstName,
    'lastName': lastName
  };
}Code language: JavaScript (javascript)

プロパティの名前は変数と同じであるため、次のようにES6のオブジェクトリテラル構文拡張を使用して短縮できます。

function getNames() {
  // get names from the database or API
  let firstName = 'John',
      lastName  = 'Doe';

  return { firstName, lastName };
}
Code language: JavaScript (javascript)

そして、次のようにオブジェクトとして戻り値を取得できます。

let names = getNames();

let firstName = names.firstName,
    lastName  = names.lastName;Code language: JavaScript (javascript)

オブジェクトからプロパティを展開する場合は、次のようにオブジェクトの分割代入構文を使用できます。

let { firstName, lastName } = getNames();Code language: JavaScript (javascript)

概要

• JavaScriptは、複数の値を返す関数をサポートしていません。ただし、複数の値を配列またはオブジェクトにラップして、配列またはオブジェクトを返すことができます。
• 分割代入構文を使用して、配列から値、またはオブジェクトからプロパティを展開します。