JavaScriptにおいて、関数に引数を渡す際、オブジェクトを引数として渡すことができます。オブジェクトを引数に取ることで、複数の情報を一つの変数でまとめて渡すことができます。
この記事では以下の内容を分かりやすく説明するように心掛けています。ご参考になれば幸いです。
- JavaScriptでオブジェクトを関数の引数に渡す方法
- 基本的な使い方
- オブジェクトを直接渡す方法
- オブジェクトを直接渡して、新たなオブジェクトを作成する方法
- プロパティ省略記法を用いない場合
- プロパティ省略記法を用いた場合
- 分割代入を利用したオブジェクトの各プロパティの参照方法
- 「オブジェクト」や「配列」が入れ子構造になっているオブジェクトを関数の引数に渡す場合
- 分割代入を用いない場合
- 分割代入を用いた場合
- デフォルト引数を用いて、デフォルト値を設定する方法
- オブジェクトを関数の引数に渡すメリット
JavaScriptでオブジェクトを関数の引数に渡す基本的な使い方
まず、基本的な使い方を説明します。以下のプログラムでは、オブジェクトを引数として関数に渡しています。
let personInfo = {
name: "Taro",
age: 30
};
function displayPersonInfo(person) {
console.log("Name: " + person.name);
console.log("Age: " + person.age);
}
displayPersonInfo(personInfo);
// ログ
// Name: Taro
// Age: 30上記のプログラムでは、personInfoオブジェクトをdisplayPersonInfo関数の引数に渡しています。
personInfoオブジェクトはnameプロパティとageプロパティを持っており、displayPersonInfo関数の内部でconsole.log関数を用いて、各プロパティの値を参照しています。
オブジェクトを関数の引数に直接渡す方法
以下のプログラムに示すように、関数の呼び出し時に、直接オブジェクトを渡すこともできます。
function displayPersonInfo(person) {
console.log("Name: " + person.name);
console.log("Age: " + person.age);
}
displayPersonInfo({ name: "Taro", age: 30 }); //直接オブジェクトを渡している
// ログ
// Name: Taro
// Age: 30上記のプログラムでは、{ name: "Taro", age: 30 }をdisplayPersonInfo関数の引数に直接渡しています。
この方法は、関数が引数として受け取るオブジェクトの形状(プロパティの名前やデータ型)が明確で、その関数を呼び出して、新たなオブジェクトを作成する場合に便利です。次に、新たなオブジェクトを作成しているプログラム例を説明します。
オブジェクトを直接渡して、新たなオブジェクトを作成する方法
以下のプログラムでは、関数を呼び出して、新たなオブジェクトを作成しています。
function wrapInPayload(person) {
return { payload: person }; //新たなオブジェクトを作成している
}
const result = wrapInPayload({ name: "Taro", age: 30 });
console.log(result);
// ログ
// { payload: { name: 'Taro', age: 30 } }wrapInPayload関数は、「引数として渡されたオブジェクト」を「payloadプロパティの値として持つ新しいオブジェクト」を作成して返しています。
上記のプログラムでは、wrapInPayload関数に{ name: "Taro", age: 30 }を渡しており、関数内部で{ payload: { name: 'Taro', age: 30 } }という新しいオブジェクトを作成して、返しています。その返り値は定数resultに格納されています。
プロパティ省略記法について
JavaScriptでは、オブジェクトのプロパティ名とその値の変数名が同じ場合、そのプロパティの値を省略することができます。これはプロパティ省略記法(Property Shorthand)といいます。
以下のプログラムでは、関数の引数名がpayloadとなっており、その引数名payloadを関数内部で、payloadプロパティの値にして返しています。
function wrapInPayload(payload) {
return { payload }; // 「関数の引数名(payload)」と「プロパティの値(payload)」が同じの場合、このように記述できる
}
const result = wrapInPayload({ name: "Taro", age: 30 });
console.log(result);
// ログ
// { payload: { name: 'Taro', age: 30 } }このように、プロパティ省略記法は、「関数の引数名(payload)」と「プロパティの値(payload)」が一致するときに有効で、そのような場合にコードをより簡潔に書くことができます。つまり、以下の2つのコードは同じ動作をします。
// 省略記法を用いない場合
function wrapInPayload(payload) {
return { payload: payload };
}
// 省略記法を用いた場合
function wrapInPayload(payload) {
return { payload };
}プロパティ省略記法を用いることで、コードをより簡潔に書くことができます。ただし、これは可読性に影響を及ぼすこともあるので、適切な場面で使うことが重要です。
「プロパティ省略記法(Property Shorthand)」は「オブジェクトリテラルの省略記法」、「オブジェクトリテラルプロパティ値の省略記法」、「オブジェクトリテラルプロパティ名の省略記法」とも呼ばれています。この記法はJavaScript ES6(ECMAScript 2015)以降で導入されました。
分割代入を利用したオブジェクトの各プロパティの参照方法
JavaScriptには分割代入(Destructuring assignment)という便利な機能があります。
関数の引数に分割代入を利用すると、渡されたオブジェクトから特定のプロパティを取り出すことができます。
以下のプログラムは分割代入を利用したプログラム例です。
let personInfo = {
name: "Taro",
age: 30
};
function displayPersonInfo({ name }) {
console.log("Name: " + name);
}
displayPersonInfo(personInfo);
// ログ
// Name: Taro上記のプログラムでは、personInfoオブジェクトをdisplayPersonInfo関数の引数に渡しています。
personInfoオブジェクトはnameプロパティとageプロパティを持っています。
displayPersonInfo関数では、分割代入を利用しており、関数定義時の引数を{ name }と書くことで、personInfoオブジェクトからnameプロパティのみを直接取り出しています。
このように、分割代入でプロパティ名(上記のプログラムでは、name)を指定すれば、プロパティに対応する値(Taro)が引数nameに格納された状態で関数が実行されます。
なお、nameプロパティもageプロパティも取り出す場合には、以下の様に記述します。
let personInfo = {
name: "Taro",
age: 30
};
function displayPersonInfo({ name, age }) {
console.log("Name: " + name);
console.log("Age: " + age);
}
displayPersonInfo(personInfo);
// ログ
// Name: Taro
// Age: 30「オブジェクト」や「配列」が入れ子構造になっているオブジェクトを関数の引数に渡す場合
「オブジェクト」や「配列」が入れ子構造になっているオブジェクトも関数の引数に渡すことができます。これにより、より複雑なデータ構造を関数に渡すことが可能になります。
分割代入を用いない場合
let personInfo = {
name: { first: "Taro", last: "Yamada" },
age: 30,
hobbies: ["tennis", "soccer"], //配列が入れ子構造になっている
pets: [
{ type: "Dog", name: "Pochi" }, //配列とオブジェクトが入れ子構造になっている
{ type: "Cat", name: "Tama" }
]
};
function displayPersonInfo(person) {
console.log("Name: " + person.name.last + person.name.first);
console.log("Age: " + person.age);
console.log("Hobbies:");
for (let hobby of person.hobbies) {
console.log(" - " + hobby);
}
console.log("Pets:");
for (let pet of person.pets) {
console.log(" - " + pet.type + ": " + pet.name);
}
}
displayPersonInfo(personInfo);
// ログ
// Name: YamadaTaro
// Age: 30
// Hobbies:
// - tennis
// - soccer
// Pets:
// - Dog: Pochi
// - Cat: Tama分割代入を用いる場合
分割代入を用いると、以下のように記述することができます。
let personInfo = {
name: { first: "Taro", last: "Yamada" },
age: 30,
hobbies: ["tennis", "soccer"], //配列が入れ子構造になっている
pets: [
{ type: "Dog", name: "Pochi" }, //配列とオブジェクトが入れ子構造になっている
{ type: "Cat", name: "Tama" }
]
};
function displayPersonInfo({ name: { first, last }, age, hobbies, pets}) {
console.log("Name: " + last + first);
console.log("Age: " + age);
console.log("Hobbies:");
for (let hobby of hobbies) {
console.log(" - " + hobby);
}
console.log("Pets:");
for (let pet of pets) {
console.log(" - " + pet.type + ": " + pet.name);
}
}
displayPersonInfo(personInfo);
// ログ
// Name: YamadaTaro
// Age: 30
// Hobbies:
// - tennis
// - soccer
// Pets:
// - Dog: Pochi
// - Cat: Tamaデフォルト引数を用いて、デフォルト値を設定する方法
JavaScriptの関数では、デフォルト引数と呼ばれる機能を用いることができます。
デフォルト引数を設定すると、関数実行時に引数が渡されなかった場合や、一部のプロパティしか持たないオブジェクトが渡された場合、関数はデフォルト値(初期値)を使って正常に実行されます。
function displayPersonInfo({ name = "No name", age = 0 } = {}) {
console.log("Name: " + name);
console.log("Age: " + age);
}
// オブジェクトを引数に渡さない場合
displayPersonInfo();
// ログ
// Name: No name
// Age: 0
// 一部のプロパティを持つオブジェクトを引数に渡す場合
displayPersonInfo({ name: "Taro"});
// ログ
// Name: Taro
// Age: 0上記のプログラムでは、displayPersonInfo関数はデフォルト値を設定した2つのプロパティ(nameとage)を持つオブジェクトを引数として受け取っています。
デフォルト値を設定しない場合、「undefined」となります。
function displayPersonInfo({ name, age } = {}) {
console.log("Name: " + name);
console.log("Age: " + age);
}
// オブジェクトを引数に渡さない場合
displayPersonInfo();
// ログ
// Name: undefined
// Age: undefined
// 一部のプロパティを持つオブジェクトを引数に渡す場合
displayPersonInfo({ name: "Taro" });
// ログ
// Name: Taro
// Age: undefinedオブジェクトを関数の引数に渡すメリット
オブジェクトを関数の引数に渡すメリットを以下に示します。
メリット
- オブジェクトを関数の引数として渡すことで、関数が必要とするデータを一つの変数にまとめることができる。
- 関数の定義や呼び出しがシンプルになる。ットの特徴
- オブジェクトのプロパティは順不同であり、順番を気にする必要がない。
- オブジェクトを関数の引数に利用しない場合、以下のようにプログラムを記述することになります。
オブジェクトを関数の引数に利用しない場合、以下のようにプログラムを記述することになります。
let personName = "Taro";
let personAge = 30;
function displayPersonInfo(name, age) {
console.log("Name: " + name);
console.log("Age: " + age);
}
displayPersonInfo(personName, personAge);
// ログ
// Name: Taro
// Age: 30上記のプログラムの場合、引数が増えてくると管理が難しくなりますし、引数の順序も気にする必要があります。例えば、「displayPersonInfo(name, age)」を「displayPersonInfo(age, name)」にしていた場合(引数の順序を間違えた場合)、console.log関数にて出力されるログは以下のようになります。
// ログ
// Name: 30
// Age: Taroこのように、引数の順番を間違えると、処理自体が意図したものにならないため、バグ混入につながります。
まとめ
この記事ではJavaScriptで『オブジェクトを関数の引数に渡す方法』について、以下の内容を説明しました。
- JavaScriptでオブジェクトを関数の引数に渡す方法
- 基本的な使い方
- オブジェクトを直接渡す方法
- オブジェクトを直接渡して、新たなオブジェクトを作成する方法
- プロパティ省略記法を用いない場合
- プロパティ省略記法を用いた場合
- 分割代入を利用したオブジェクトの各プロパティの参照方法
- 「オブジェクト」や「配列」が入れ子構造になっているオブジェクトを関数の引数に渡す場合
- 分割代入を用いない場合
- 分割代入を用いた場合
- デフォルト引数を用いて、デフォルト値を設定する方法
- オブジェクトを関数の引数に渡すメリット
お読み頂きありがとうございました。