Destructuring, further in JavaScript

Defaults, renaming, nesting, and pulling apart function parameters.

const response = {
  data: { runs: [{ lang: "go", tpm: 104 }] },
  meta: { page: 1 },
};

const { data: { runs: [first = {}] }, meta: { page, size = 20 } } = response;
console.log(first.lang, page, size);

function summarize({ lang, tpm = 0, stars: earned = 1 } = {}) {
  return `${lang ?? "unknown"} ${tpm} ${earned}`;
}
console.log(summarize(first), summarize());

const [head, ...rest] = [1, 2, 3];
const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(head, rest, a, others);

How it works

A default applies when the value is undefined, not null.
{ a: renamed } binds under a different name.
Destructuring in the parameter list documents the shape.

Keywords and builtins used here

const
function
return

The run, in numbers

Lines: 16
Characters to type: 478
Tokens: 175
Three-star pace: 90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 117 seconds.

Type this snippet

Step 3 of 3 in Functions, step 16 of 43 in Language basics.

← Previous Next →