オブジェクトで複数の値を返す
2024-04-02
JavaScriptで複数の値を返す
オブジェクトを返す
最も一般的な方法は、オブジェクトを返すことです。オブジェクトはプロパティと値のペアの集合体であり、複数の値を格納するのに適しています。
function getPersonInfo() {
return {
name: "John Doe",
age: 30,
email: "[email protected]",
};
}
const person = getPersonInfo();
console.log(person.name); // "John Doe"
console.log(person.age); // 30
console.log(person.email); // "[email protected]"
メリット:
- 読みやすく、理解しやすい
- 柔軟性があり、さまざまなデータ構造を格納できる
- プロパティ名を知っている必要がある
- 多くの場合、冗長なコードになる
配列を返す
配列は、値の順序付きリストであり、複数の値を返すもう 1 つの方法です。
function getNumbers() {
return [1, 2, 3, 4, 5];
}
const numbers = getNumbers();
console.log(numbers[0]); // 1
console.log(numbers[1]); // 2
console.log(numbers[2]); // 3
console.log(numbers[3]); // 4
console.log(numbers[4]); // 5
- シンプルで分かりやすい
- 順序付きのデータ構造を格納するのに適している
- 配列のインデックスを知っている必要がある
- オブジェクトと比べて冗長になる場合がある
タプルを返す
タプルは、固定長の値のリストであり、TypeScriptなどの言語で使用できます。
function getCoordinates(): [number, number] {
return [10.0, 20.0];
}
const coordinates = getCoordinates();
const x = coordinates[0]; // 10.0
const y = coordinates[1]; // 20.0
- 型安全性がある
- JavaScriptの標準機能ではない
- TypeScriptなどの言語でのみ使用できる
Promiseを使用する
非同期処理の場合、Promiseを使用して複数の値を返すことができます。
function getData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
name: "John Doe",
age: 30,
});
}, 1000);
});
}
getData().then((data) => {
console.log(data.name); // "John Doe"
console.log(data.age); // 30
});
- 非同期処理を簡単に扱える
- 複数の値をまとめて返すことができる
- 少し複雑なコードになる
Generatorを使用すると、複数の値をイテレータとして返すことができます。
function* getNumbers() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
}
const numbers = getNumbers();
for (const number of numbers) {
console.log(number);
}
- イテレータを簡単に作成できる
- 処理を分割して実行できる
JavaScriptで複数の値を返す方法はいくつかあります。それぞれの方法にはメリットとデメリットがあり、状況に応じて使い分けることが重要です。
オブジェクトを返す
function getPersonInfo() {
return {
name: "John Doe",
age: 30,
email: "[email protected]",
};
}
const person = getPersonInfo();
console.log(person.name); // "John Doe"
console.log(person.age); // 30
console.log(person.email); // "[email protected]"
配列を返す
function getNumbers() {
return [1, 2, 3, 4, 5];
}
const numbers = getNumbers();
console.log(numbers[0]); // 1
console.log(numbers[1]); // 2
console.log(numbers[2]); // 3
console.log(numbers[3]); // 4
console.log(numbers[4]); // 5
タプルを返す
function getCoordinates(): [number, number] {
return [10.0, 20.0];
}
const coordinates = getCoordinates();
const x = coordinates[0]; // 10.0
const y = coordinates[1]; // 20.0
Promiseを使用する
function getData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
name: "John Doe",
age: 30,
});
}, 1000);
});
}
getData().then((data) => {
console.log(data.name); // "John Doe"
console.log(data.age); // 30
});
Generatorを使用する
function* getNumbers() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
}
const numbers = getNumbers();
for (const number of numbers) {
console.log(number);
}
実行方法
これらのコードは、ブラウザのコンソールまたはJavaScriptの開発環境で実行できます。
- 各方法の詳細については、JavaScriptのドキュメントを参照してください。
- 状況に応じて、最適な方法を選択してください。
JavaScriptで複数の値を返すその他の方法
デストラクチャリングを使用する
オブジェクトや配列を返す場合、デストラクチャリングを使用して、返された値を個々の変数に割り当てることができます。
function getPersonInfo() {
return {
name: "John Doe",
age: 30,
email: "[email protected]",
};
}
const { name, age, email } = getPersonInfo();
console.log(name); // "John Doe"
console.log(age); // 30
console.log(email); // "[email protected]"
スプレッド構文を使用する
配列を返す場合、スプレッド構文を使用して、返された値を別の配列に追加することができます。
function getNumbers() {
return [1, 2, 3, 4, 5];
}
const numbers = [0, ...getNumbers(), 6, 7, 8, 9];
console.log(numbers); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Symbolを使用して、独自のキーを作成し、オブジェクトのプロパティとして値を格納することができます。
const nameSymbol = Symbol("name");
const ageSymbol = Symbol("age");
function getPersonInfo() {
return {
[nameSymbol]: "John Doe",
[ageSymbol]: 30,
};
}
const person = getPersonInfo();
console.log(person[nameSymbol]); // "John Doe"
console.log(person[ageSymbol]); // 30
javascript return multiple-variable-return
