Arrays and Tuples

Destructuring

Destructuring pulls typed values out of arrays and objects into named variables.

destructuring Destructuring assigns pieces of a value to local names in one statement.

Destructuring

user
destructuring.ts
Replay: real traced execution (multi-file project)
const user: [string, number] = ["Ada", 3];
const [name, lessonCount] = user;

const nextLesson: string = "objects";
const message: string = `${name} has ${lessonCount} lessons before ${nextLesson}.`;

console.log(message);

const user: [string, number] = ["Grace", 5];
const [name, lessonCount] = user;

const nextLesson: string = "objects";
const message: string = `${name} has ${lessonCount} lessons before ${nextLesson}.`;

console.log(message);

const user: [string, number] = ["Linus", 2];
const [name, lessonCount] = user;

const nextLesson: string = "objects";
const message: string = `${name} has ${lessonCount} lessons before ${nextLesson}.`;

console.log(message);

  1. user ← Ada,3, name ← Ada, lessonCount ← 3, nextLesson ← objects

    1const user→ Ada,3: [string, number] = ["Ada", 3];  //@user=["Grace", 5], ["Linus", 2]2const [name→ Ada, lessonCount→ 3] = user→ Ada,3;34const nextLesson→ objects: string = "objects";5const message→ Ada has 3 lessons before objects.: string = `${nameAda} has ${lessonCount3} lessons before ${nextLessonobjects}.`;67console.log(messageAda has 3 lessons before objects.);
    outputAda has 3 lessons before objects.

  1. user ← Grace,5, name ← Grace, lessonCount ← 5, nextLesson ← objects

    1const user→ Grace,5: [string, number] = ["Grace", 5];2const [name→ Grace, lessonCount→ 5] = user→ Grace,5;34const nextLesson→ objects: string = "objects";5const message→ Grace has 5 lessons before objects.: string = `${nameGrace} has ${lessonCount5} lessons before ${nextLessonobjects}.`;67console.log(messageGrace has 5 lessons before objects.);
    outputGrace has 5 lessons before objects.

  1. user ← Linus,2, name ← Linus, lessonCount ← 2, nextLesson ← objects

    1const user→ Linus,2: [string, number] = ["Linus", 2];2const [name→ Linus, lessonCount→ 2] = user→ Linus,2;34const nextLesson→ objects: string = "objects";5const message→ Linus has 2 lessons before objects.: string = `${nameLinus} has ${lessonCount2} lessons before ${nextLessonobjects}.`;67console.log(messageLinus has 2 lessons before objects.);
    outputLinus has 2 lessons before objects.

Follow the Destructure

  1. user starts as ["Ada", 3].
  2. Destructuring assigns the first value to name.
  3. It assigns the second value to lessonCount.
  4. nextLesson is objects.
  5. The message becomes Ada has 3 lessons before objects. | source value | local name | final text part | | --- | --- | --- | | Ada | name | Ada | | 3 | lessonCount | 3 lessons | | objects | nextLesson | before objects |

Exercise: destructuring.ts

Reproduce Ada has 3 lessons before objects., then use the pinned user variants to predict Grace has 5 lessons before objects. and Linus has 2 lessons before objects.