Destructuring and Spread

Object Destructuring

Pull named fields out of an object.

object-destructuring Object destructuring reads properties by name. The left-hand names match fields on the object unless you rename them.

Object Destructuring

quantity
object_destructure.js
Replay: real traced execution (multi-file project)
const quantity = 2;
const { item, qty } = { item: "pen", qty: quantity };
const summary = item + "=" + qty;

console.log("item=" + item);
console.log("summary=" + summary);

const quantity = 5;
const { item, qty } = { item: "pen", qty: quantity };
const summary = item + "=" + qty;

console.log("item=" + item);
console.log("summary=" + summary);

const quantity = 9;
const { item, qty } = { item: "pen", qty: quantity };
const summary = item + "=" + qty;

console.log("item=" + item);
console.log("summary=" + summary);

  1. quantity ← 2, item ← pen, qty ← 2, summary ← pen=2

    1const quantity→ 2 = 2; //@quantity=5, 92const { item→ pen, qty→ 2 } = { item: "pen", qty: quantity2 };3const summary→ pen=2 = item→ pen + "=" + qty2;45console.log("item=" + itempen);6console.log("summary=" + summarypen=2);
    outputitem=pen
summary=pen=2

  1. quantity ← 5, item ← pen, qty ← 5, summary ← pen=5

    1const quantity→ 5 = 5;2const { item→ pen, qty→ 5 } = { item: "pen", qty: quantity5 };3const summary→ pen=5 = item→ pen + "=" + qty5;45console.log("item=" + itempen);6console.log("summary=" + summarypen=5);
    outputitem=pen
summary=pen=5

  1. quantity ← 9, item ← pen, qty ← 9, summary ← pen=9

    1const quantity→ 9 = 9;2const { item→ pen, qty→ 9 } = { item: "pen", qty: quantity9 };3const summary→ pen=9 = item→ pen + "=" + qty9;45console.log("item=" + itempen);6console.log("summary=" + summarypen=9);
    outputitem=pen
summary=pen=9