デフォルト値

概要

デフォルト値は関数の引数やオブジェクトの分割代入時に使います。
値が存在しないときのデフォルト値の設定をします。

引数のデフォルト値

JavaScriptでは値が存在しない場合に、デフォルト値が設定されていないとundefinedとなるため以下のようになります。

const sayHello = (name) => console.log(`こんにちは${ name }さん！`);
sayHello(); //こんにちはundefinedさん！

引数名の後ろに=で値を入れることで、デフォルト値を設定することが出来ます。

const sayHello = (name= "ゲスト") => console.log(`こんにちは${ name }さん！`);
sayHello(); //こんにちはゲストさん！

値が渡された場合はそちらが優先されます。

const sayHello = (name= "ゲスト") => console.log(`こんにちは${ name }さん！`);
sayHello(); //こんにちはゲストさん！
sayHello("田中"); //こんにちは田中さん！

オブジェクト分割代入のデフォルト値

オブジェクトの分割代入時にもデフォルト値の設定が出来ます。
存在しない値(今回の場合はname)を呼び出すとundefinedとなります。

const myProfile = {
  age: 20,
 };
 
 const { name } = myProfile;

 const message = `こんにちは${ name }さん！`;
 console.log(message);  //こんにちはundefinedさん！

分割代入時に変数名の後ろに=で値を入れることで、デフォルト値を設定することが出来ます。

const myProfile = {
  age: 20,
 };
 
 const { name = "ゲスト" } = myProfile;

 const message = `こんにちは${ name }さん！`;
 console.log(message);  //こんにちはゲストさん！

プロパティが存在する場合はそちらが優先されます。

const myProfile = {
  name: "田中",
  age: 20,
 };
 
 const { name = "ゲスト" } = myProfile;

 const message = `こんにちは${ name }さん！`;
 console.log(message);  //こんにちは田中さん！