Destructuring and Spread

Array Destructuring

Pull values out of an array by position.

array-destructuring Array destructuring assigns positions from the right-hand array to names on the left. It is useful when the position already has a clear meaning.

Array Destructuring

firstName
array_destructure.js
Replay: real traced execution (multi-file project)
const firstName = "Ada";
const [first, status] = [firstName, "ready"];
const label = first + ":" + status;

console.log("first=" + first);
console.log("label=" + label);

const firstName = "Bo";
const [first, status] = [firstName, "ready"];
const label = first + ":" + status;

console.log("first=" + first);
console.log("label=" + label);

const firstName = "Cy";
const [first, status] = [firstName, "ready"];
const label = first + ":" + status;

console.log("first=" + first);
console.log("label=" + label);

  1. firstName ← Ada, first ← Ada, status ← ready, label ← Ada:ready

    1const firstName→ Ada = "Ada"; //@firstName="Bo", "Cy"2const [first→ Ada, status→ ready] = [firstNameAda, "ready"];3const label→ Ada:ready = first→ Ada + ":" + statusready;45console.log("first=" + firstAda);6console.log("label=" + labelAda:ready);
    outputfirst=Ada
label=Ada:ready

  1. firstName ← Bo, first ← Bo, status ← ready, label ← Bo:ready

    1const firstName→ Bo = "Bo";2const [first→ Bo, status→ ready] = [firstNameBo, "ready"];3const label→ Bo:ready = first→ Bo + ":" + statusready;45console.log("first=" + firstBo);6console.log("label=" + labelBo:ready);
    outputfirst=Bo
label=Bo:ready

  1. firstName ← Cy, first ← Cy, status ← ready, label ← Cy:ready

    1const firstName→ Cy = "Cy";2const [first→ Cy, status→ ready] = [firstNameCy, "ready"];3const label→ Cy:ready = first→ Cy + ":" + statusready;45console.log("first=" + firstCy);6console.log("label=" + labelCy:ready);
    outputfirst=Cy
label=Cy:ready