Destructuring and Spread

Destructuring Defaults

Use a default when a destructured field is missing.

destructuring-defaults A destructuring pattern can include defaults. The default is used when the source value is `undefined`.

Destructuring Defaults

inputName
default_destructure.js
Replay: real traced execution (multi-file project)
const inputName = "";
const { name = "Guest" } = { name: inputName || undefined };
const greeting = "hello " + name;

console.log("name=" + name);
console.log("greeting=" + greeting);

const inputName = "Mira";
const { name = "Guest" } = { name: inputName || undefined };
const greeting = "hello " + name;

console.log("name=" + name);
console.log("greeting=" + greeting);

const inputName = "Nia";
const { name = "Guest" } = { name: inputName || undefined };
const greeting = "hello " + name;

console.log("name=" + name);
console.log("greeting=" + greeting);

  1. inputName ← (empty), name ← Guest, greeting ← hello Guest

    1const inputName→ (empty) = ""; //@inputName="Mira", "Nia"2const { name→ Guest = "Guest" } = { name: inputName→ (empty) || undefined };3const greeting→ hello Guest = "hello " + nameGuest;45console.log("name=" + nameGuest);6console.log("greeting=" + greetinghello Guest);
    outputname=Guest
greeting=hello Guest

  1. inputName ← Mira, name ← Mira, greeting ← hello Mira

    1const inputName→ Mira = "Mira";2const { name→ Mira = "Guest" } = { name: inputName→ Mira || undefined };3const greeting→ hello Mira = "hello " + nameMira;45console.log("name=" + nameMira);6console.log("greeting=" + greetinghello Mira);
    outputname=Mira
greeting=hello Mira

  1. inputName ← Nia, name ← Nia, greeting ← hello Nia

    1const inputName→ Nia = "Nia";2const { name→ Nia = "Guest" } = { name: inputName→ Nia || undefined };3const greeting→ hello Nia = "hello " + nameNia;45console.log("name=" + nameNia);6console.log("greeting=" + greetinghello Nia);
    outputname=Nia
greeting=hello Nia