分割代入 — オブジェクトと配列から値を取り出す

注文データから注文番号と合計金額だけを使いたいとき、order.orderId と order.total を何度も書くとコードが長くなります。取り出したい項目が増えるほど、同じ order. が行の先頭に並びます。

この記事では、キー名や位置に合わせて必要な値だけを一度に変数へ取り出す分割代入を扱います。

必要な値だけを名前で取り出す — オブジェクトの分割代入

1 つの注文オブジェクトから注文番号・合計金額・顧客名を取り出すとき、const orderId = order.orderId; のような行を項目の数だけ並べます。同じ order. を繰り返すぶん、どの値を使いたいのかが読み取りにくくなります。

分割代入（オブジェクトのキー名や配列の位置に合わせて、値を複数の変数へ一度に取り出す書き方）を使うと、const { orderId, total } = order; と 1 行で書けます。左辺の {} の中に書いたキー名がそのまま変数名になり、同じ名前のプロパティの値が入ります。

キーが無いときの既定値は const { shippingFee = 500 } = order; のように = で添えます。別の名前で受け取りたいときは const { orderId: id } = order; と書きます。

入れ子になったオブジェクトからは const { customer: { name } } = order; の形で、内側の値を直接取り出せます。: のうしろが変数名か波カッコかで意味が変わります。

customer: name は customer の値を name という変数で受け取り、customer: { name } は customer の内側の name を取り出します。後者では customer という変数は作られません。

const order = {
  orderId: "ORD-1268",
  total: 12800,
  customer: { name: "小林 彩", email: "aya@example.com" },
};

// キー名がそのまま変数名になる
const { orderId, total } = order;
console.log(orderId);          // ORD-1268
console.log(total);            // 12800

// 無いキーは = で既定値を添える
const { couponCode = "なし" } = order;
console.log(couponCode);       // なし

// : のうしろに別の変数名を書く
const { total: totalAmount } = order;
console.log(totalAmount);      // 12800

// 入れ子の内側から直接取り出す
const { customer: { email } } = order;
console.log(email);            // aya@example.com

注文オブジェクトから、表示に必要な値だけを 1 行ずつ取り出します。order は宣言済みです。

① 注文番号と合計金額を一度に取り出して、「ORD-3120 / 8600 円」の形で表示してください。

② 顧客名を、入れ子の内側から直接取り出して表示してください。

③ 送料を既定値 500 として取り出して表示してください。order に送料の項目はありません。

④ 注文番号を id という名前で受け取って表示してください。

（正しく実行できれば解説が表示されます）

並び順で受け取る — 配列の分割代入と rest

配列にはキー名が無いので、取り出す位置で対応づけます。カートの先頭の商品と 2 番目の商品を別々に扱いたいとき、cart[0] と cart[1] を書くかわりに、変数名を並べて一度に受け取れます。

書き方は const [firstItem, secondItem] = cart; です。左から順に index 0・1 の値が入ります。途中を飛ばしたいときは const [, secondItem] = cart; のようにカンマだけを置きます。

要素が足りない位置には = "（なし）" の形で既定値を添えられます。なお既定値が使われるのは、その位置の値が undefined のときだけです。

null が入っていれば null のまま受け取ります。null も既定値に置き換えたいときは、前の記事の ?? を使います。

残り全部をまとめて受け取りたいときは rest 構文（分割代入の左辺で ... を付けて、受け取り切れなかった残りを 1 つの配列やオブジェクトにまとめる書き方）を使います。

const [firstItem, ...restItems] = cart; と書くと、restItems には 2 番目以降が配列で入ります。... は左辺の最後にだけ置けます。

const cart = ["ペン", "テープ", "ボード"];

// 左から順に受け取る
const [firstItem, secondItem] = cart;
console.log(firstItem);            // ペン
console.log(secondItem);           // テープ

// カンマだけを置くと、その位置を飛ばせる
const [, , thirdItem] = cart;
console.log(thirdItem);            // ボード

// ... で残り全部を配列として受け取る（先頭は上で使ったので別名にする）
const [headItem, ...tailItems] = cart;
console.log(tailItems.join(", "));  // テープ, ボード

// オブジェクトでも残りをまとめられる
const product = { name: "テープ", price: 380, stock: 12 };
const { name, ...spec } = product;
console.log(Object.keys(spec).join(", "));  // price, stock

カートの中身を、先頭とそれ以外に分けて扱います。cart は宣言済みです。

① 先頭の商品と、それ以外をまとめた配列に分けて、先頭の商品を表示してください。

② それ以外が何件あるかを表示してください。

③ 2 番目の商品だけを、先頭を飛ばす書き方で取り出して表示してください。

④ 5 番目の商品を、前の 4 つ分のカンマを置いて飛ばし、既定値「（なし）」を添えて取り出して表示してください。

商品オブジェクトから、表示に使う項目と、それ以外の項目を分けて扱います。product は宣言済みです。

① 商品名だけを取り出し、残りの項目をまとめた別のオブジェクトに分けて、商品名を表示してください。

② 残りをまとめたオブジェクトのキーを「, 」でつないで表示してください。

③ 在庫数を、キーが無かったときの既定値 0 として取り出して表示してください。