【JavaScript】分割代入とデフォルト値

7168 ワード
初学者 JavaScript 分割代入 JavaScript テキストリンク

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

分割代入とデフォルト値

分割代入

オブジェクトの場合
const myProfile = {
 name: "田中";
 age: 39;
};

// 分割代入を使用しない場合
const message = `名前は${myProfile.name}です。歳は${myProfile.age}歳です。`;
console.log(message);
// "名前は田中です。歳は39歳です。"

// 上記の記述はmyProfileを何度も書く必要があり冗長であるため、分割代入を利用して以下のように記述

// 分割代入を使用した場合
// 取り出したいプロパティ名を{}のなかに記述。=の後に取り出すオブジェクトを記述
const { name, age } = myProfile
// 呼び出す際には、myProfileは記述不要
const message = `名前は${name}です。歳は${age}歳です。`;
console.log(message);
// "名前は田中です。歳は39歳です。"
配列の場合
// 分割代入を使用しない場合
const myProfile = [ '田中', 39 ]
const message = `名前は${myProfile[0]}です。歳は${myProfile[1]}歳です。`;
console.log(message);
// "名前は田中です。歳は39歳です。"


// 分割代入を使用した場合
// 配列で記述。配列の順番に格納される。以下ではnameは'田中',ageは39。
const [ name, age ] = myProfile
const myProfile = [ '田中', 39 ]
const message = `名前は${name}です。歳は${age}歳です。`;
console.log(message);
// "名前は田中です。歳は39歳です。"

デフォルト値

const myName = (name) => console.log(`こんにちは、${name}さん`);
myName();
// 値を渡していない場合、"こんにちは、undefinedさん"のような形で出力される。

// undefinedを避けるために以下のように記述し、デフォルト値を設定する。
const myName = (name = "ゲスト") => console.log(`こんにちは、${name}さん`);
myName();
// 値を渡していない場合、"こんにちは、ゲストさん"。

const myName = (name = "ゲスト") => console.log(`こんにちは、${name}さん`);
myName("田中");
// 値を渡すと、"こんにちは、田中さん"。