分割代入
このレッスンで分かること
- 分割代入 で配列 / オブジェクトから値を一気に取り出す
const { name, age } = userconst [a, b] = arrが基本形- デフォルト値
const { name = "unknown" } = user- リネーム
const { name: userName } = user
分割代入 とは
配列やオブジェクトから必要な値を効率的に取り出す方法を学ぼう。本レッスンでは、分割代入 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
分割代入
配列やオブジェクトから値を取り出して変数に代入する簡潔な構文です。
オブジェクトの分割代入
JavaScript
const user = { name: "太郎", age: 25, city: "東京" };
const { name, age } = user;
console.log(name); // "太郎"ネストした分割代入とデフォルト値
JavaScript
const { address: { city } = { city: "不明" } } = user;
const { hobbies = [] } = user;関数の引数での分割代入
JavaScript
function greet({ name, age = 0 }) {
return `${name}（${age}歳）`;
}この問題では、ネストしたオブジェクトからデフォルト値付きで分割代入する関数を実装しましょう。
実務で遭遇するパターン
中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。
- React の props ─
function Comp({ title, onClick }) - API レスポンスの整形 ─
const { data, error } = response - 設定オブジェクトの展開 ─
function init({ host, port = 8080, ssl = false }) - 配列の swap ─
[a, b] = [b, a]
コードレビューで指摘されがちなポイント
PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。
- ネストが深すぎる ─
const { a: { b: { c } } } = objは読みづらい、別変数で取る - デフォルト値が
null通過 ─ デフォルトはundefinedのときのみ、nullには効かない - 型を
TypeScriptで書いていない ─ 分割代入は型付けの恩恵が大きいので TS で書く - 順序依存 ─ 配列分割は順番大事、オブジェクトはキー名で安全
パフォーマンス考慮事項
- コンパイラ / JIT が最適化 ─ オブジェクトアクセスと同等
- 配列分割は順序依存 ─ イテレータ呼び出しが若干コスト
- デフォルト値の評価 ─ 関数を渡すと毎回呼ばれる、定数なら問題なし
- ネストでの GC ─ 中間オブジェクトを作らないので軽量
ここまでの要点
分割代入で配列 / オブジェクトから一気に取り出し、デフォルト値とリネームも可能。undefined のときだけデフォルトが発動。
よくある質問
Q. 存在しないキーを分割代入するとどうなりますか？
A. 値は undefined になります。デフォルト値を指定したい場合は const { name = 'guest' } = user; のように = で書けます。深いネストでも const { profile: { age = 0 } = {} } = user; のように途中の null/undefined を防げます。
Q. 別名で受け取ることはできますか？
A. const { name: userName } = user; のように : で別名を付けられます。コンポーネント間でプロパティ名が衝突しないようにしたいときや、短い変数名にリネームしたいときに使うと可読性が上がります。
Q. 配列の分割代入で先頭と残りを分けるには？
A. const [first, ...rest] = list; と書けば先頭が first、残りが配列 rest に入ります。スキップしたい要素はカンマで空けて const [, second] = list; とできます。タプル型と相性が良く、関数の複数戻り値を分解するときにも便利です。
次のレッスン
次は try/catchとエラーハンドリング で、配列やオブジェクトから必要な値を効率的に取り出す方法を学ぼう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 分割代入 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 分割代入 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
extractUserInfo({"address":{"city":"東京","zip":"100-0001"},"age":25,"hobbies":["読書","映画"],"name":"太郎"}) → {"age":25,"city":"東京","firstHobby":"読書","name":"太郎","zip":"100-0001"}
extractUserInfo({"age":30,"name":"花子"}) → {"age":30,"city":"不明","firstHobby":"なし","name":"花子","zip":"000-0000"}
extractUserInfo({"address":{"city":"大阪","zip":"530-0001"},"age":20,"hobbies":[],"name":"Bob"}) → {"age":20,"city":"大阪","firstHobby":"なし","name":"Bob","zip":"530-0001"}