分割代入とスプレッド/レスト

オブジェクトや配列からデータをきれいに取り出し、スプレッド演算子で構造をコピーしたり結合したりします。

8 分 · 3 問

APIからデータを受け取るとき、必要なのはいくつかのプロパティだけということがよくあります。分割代入はそれらを1行で取り出し、名前を変えたり、ネストしたオブジェクトに入り込んだり、プロパティが欠けている場合にデフォルト値を提供したりできます。

const user = {
  id: 42,
  name: "Lea",
  address: { city: "Lyon", zip: "69001" }
};

const { name, address: { city } } = user;
const { role = "guest" } = user;

console.log(name, city, role); // "Lea" "Lyon" "guest"

分割代入は配列でも機能します。今度は位置によってです。最もプロらしい使い方はやはり関数の引数です。不透明なオブジェクトを受け取る代わりに、シグネチャがどのプロパティが期待されているかを正確に示します。コードが自己文書化されるのです。

const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(first, third); // "gold" "bronze"

function formatUser({ name, role = "guest" }) {
  return `${name} (${role})`;
}

console.log(formatUser({ name: "Sam" }));
// "Sam (guest)"

同じ ... 演算子には2つの顔があります。スプレッドとしては、配列やオブジェクトを展開してコピーまたは結合します。デフォルト設定を適用してから上書きするために広く使われます。レストとしては、"残りすべて"を配列にまとめます。たとえば可変数の引数を受け取るためです。

const baseConfig = { theme: "dark", lang: "fr" };
const overrides = { lang: "en" };
const config = { ...baseConfig, ...overrides };
// { theme: "dark", lang: "en" }

const scores = [12, 18, 9];
const allScores = [...scores, 20]; // [12, 18, 9, 20]

function sumAll(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3)); // 6

クイズに進む前の頭の体操: { ...baseConfig, ...overrides } の中で、両方のオブジェクトが lang を定義していたらどうなるでしょう? 最後に書かれたものが勝ちます。この順序の細かい点こそが、"デフォルトの後に上書き"パターンを可能にしているものです。

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. const { city } = user; という行は何をしますか?
   • user.city を含む city 変数を作成します
   • user オブジェクトを city に名前変更します
   • city という名前の新しい空のオブジェクトを作成します
2. function log(...args) の中で、関数内の args は何ですか?
   • キーと値のオブジェクト
   • 受け取ったすべての引数を含む本物の配列
   • 文字列
   • 最初の引数だけ
3. const copy = { ...original }; の後、ネストしたオブジェクトは複製されますか?
   • はい、コピーは完全に独立しています
   • いいえ、共有されたままです。コピーは浅いです
   • コピーから削除されます