分割代入は必ず使ったほうがよいですか

取り出す値が 2 つ以上あるときは読みやすくなります。1 つだけなら work.title と書いたほうが素直な場面も多いです。関数の引数で使うと呼び出し側が名前付きで値を渡せるようになるため、そこが最も効果の大きい使いどころです。

既定値が使われる条件を教えてください

値が undefined のときだけです。null や 0 や空文字が入っていた場合はその値がそのまま採用されます。?? と同じ判定基準なので、null を既定値に置き換えたいときは分割代入の後にもう一段 ?? を書く必要があります。

入れ子の分割代入でエラーになります

途中の階層が undefined だとエラーになります。入れ子の分割代入をするなら途中の階層にも既定値の空オブジェクトを置くか、素直に work?.links?.url と書くほうが安全です。深い分割代入は読みにくくなりがちなので使いすぎに注意してください。

分割代入｜コードで実践 - ゆめさくコード

このレッスンで分かること

const { name, role } = profile で、必要な値をまとめて変数に取り出せます

既定値が効くのは、値が undefined のときだけです

同じ名前を 2 回書く行が並ぶ

オブジェクトから値を取り出す方法は身に付きました。ただ、実際に書いてみると気になることがあります。

JavaScript

function describeProfile(profile) {
  const name = profile.name;
  const role = profile.role;
  const since = profile.since;
  return name + " / " + role + " / " + since + " 年から";
}

name という単語が 1 行に 2 回出てきます。やっているのは同じ名前の変数に移し替えるだけなのに、行数だけが増えていきます。

JavaScript

const { name, role, since } = profile;

これが分割代入です。箱から必要な値を取り出して名前を付けるための道具で、{} の中に書いたキー名と同じ名前の変数が作られ、対応する値が入ります。要らないキーは書かなくてかまいませんし、キーの名前で対応を取るので順番も自由です。3 行が 1 行になりました。

無いキーには既定値を添えられる

対応するキーが無いときは undefined が入ります。そこで既定値を書けます。

JavaScript

const { role = "学習中" } = { name: "山田 太郎" };
console.log(role);   // 学習中  role が無いので既定値になる

const { level = 0 } = { level: null };
console.log(level);   // null  既定値は使われない

既定値が使われるのは、値が undefined のときだけです。null や 0 や "" が入っていれば、そのままの値が採用されます。この基準は ?? や ?. と同じで、第3章から一貫しています。

キー名をそのまま変数名にしたくないときは、コロン記号で付け替えられます。

書き方	意味
`const { name } = profile`	`profile.name` を `name` に取り出す
`const { name = "匿名" } = profile`	無いときは `"匿名"` を使う
`const { name: author } = profile`	変数名を `author` に変える
`const { name: author = "匿名" } = profile`	付け替えと既定値を同時に使う

配列でも同じことができますが、こちらは名前ではなく位置で対応を取ります。左辺は [] です。

JavaScript

const [first, second] = ["HTML", "CSS", "JavaScript"];
console.log(first, second);   // HTML CSS

オブジェクトは名前で、配列は位置で対応する。この違いが、意味の違う値をオブジェクトで返すべき理由そのものです。

引数の位置で、そのまま開ける

分割代入がいちばん活きるのは関数の引数です。引数の位置に直接 {} を書けます。

JavaScript

function describeSkill({ label, level = 1 }) {
  return label + " レベル" + level;
}

console.log(describeSkill({ label: "CSS", level: 3 }));   // CSS レベル3
console.log(describeSkill({ label: "HTML" }));            // HTML レベル1

呼ぶ側はオブジェクトを 1 つ渡すだけ、関数の中は最初から必要な値が変数になった状態から始められます。既定値も同じように書けるので、キーが欠けた入力もその場で埋まります。

よくある間違い

付け替えの向きを逆にする — 左がキー、右が新しい変数名です。「元の名前から新しい名前」の順と覚えます
オブジェクトなのに [] で受ける — 配列は []、オブジェクトは {} です。オブジェクトは位置を持たないので、[] では取り出せず TypeError になります

このレッスンで分かること

const { name, role } = profile で、必要な値をまとめて変数に取り出せます

既定値が効くのは、値が undefined のときだけです

同じ名前を 2 回書く行が並ぶ

オブジェクトから値を取り出す方法は身に付きました。ただ、実際に書いてみると気になることがあります。

JavaScript

function describeProfile(profile) {
  const name = profile.name;
  const role = profile.role;
  const since = profile.since;
  return name + " / " + role + " / " + since + " 年から";
}

name という単語が 1 行に 2 回出てきます。やっているのは同じ名前の変数に移し替えるだけなのに、行数だけが増えていきます。

JavaScript

const { name, role, since } = profile;

無いキーには既定値を添えられる

対応するキーが無いときは undefined が入ります。そこで既定値を書けます。

JavaScript

const { role = "学習中" } = { name: "山田 太郎" };
console.log(role);   // 学習中  role が無いので既定値になる

const { level = 0 } = { level: null };
console.log(level);   // null  既定値は使われない

キー名をそのまま変数名にしたくないときは、コロン記号で付け替えられます。

書き方	意味
`const { name } = profile`	`profile.name` を `name` に取り出す
`const { name = "匿名" } = profile`	無いときは `"匿名"` を使う
`const { name: author } = profile`	変数名を `author` に変える
`const { name: author = "匿名" } = profile`	付け替えと既定値を同時に使う

配列でも同じことができますが、こちらは名前ではなく位置で対応を取ります。左辺は [] です。

JavaScript

const [first, second] = ["HTML", "CSS", "JavaScript"];
console.log(first, second);   // HTML CSS

オブジェクトは名前で、配列は位置で対応する。この違いが、意味の違う値をオブジェクトで返すべき理由そのものです。

引数の位置で、そのまま開ける

分割代入がいちばん活きるのは関数の引数です。引数の位置に直接 {} を書けます。

JavaScript

function describeSkill({ label, level = 1 }) {
  return label + " レベル" + level;
}

console.log(describeSkill({ label: "CSS", level: 3 }));   // CSS レベル3
console.log(describeSkill({ label: "HTML" }));            // HTML レベル1

よくある間違い

付け替えの向きを逆にする — 左がキー、右が新しい変数名です。「元の名前から新しい名前」の順と覚えます
オブジェクトなのに [] で受ける — 配列は []、オブジェクトは {} です。オブジェクトは位置を持たないので、[] では取り出せず TypeError になります

分割代入

同じ名前を 2 回書く行が並ぶ

無いキーには既定値を添えられる

引数の位置で、そのまま開ける

よくある間違い

要件

入出力例

ヒント

メモ

分割代入

同じ名前を 2 回書く行が並ぶ

無いキーには既定値を添えられる

引数の位置で、そのまま開ける

よくある間違い

要件

入出力例

ヒント

メモ