Defaults, rest, and copying without surprises

Lesson 3 introduced destructuring and showed that spread copies one level deep. This lesson covers the rules that decide what you actually get.

Defaults apply only to undefined

A default in a destructuring pattern or a parameter list is used when the value is undefined — missing, or explicitly undefined. null is a value, so it skips the default and comes through as null.

function connect({ host = "localhost", port = 5432 } = {}) {
  return `${host}:${port}`;
}
connect();                 // "localhost:5432" — the = {} covers no argument
connect({ port: null });   // "localhost:null"

The same split shows up with operators: ?? falls back for null and undefined, || for every falsy value, including 0 and "".

Rest and spread

Rest collects "everything else". In an object pattern it is the easy way to drop keys without mutating anything:

const { password, ...publicUser } = user;   // publicUser has no password

Spread copies own enumerable properties into a new object, in order. When two sources share a key, the later one wins, so defaults go first and overrides last: { ...defaults, ...options }. A key present in options with the value undefined still overwrites the default.

1function connect({ host = "localhost", port = 5432 } = {}) {2  return `${host}:${port}`;3}4 5export function run() {6  const defaults = { retries: 3, verbose: false };7  const user = { id: 1, name: "Ana", password: "hunter2" };8  const { password, ...publicUser } = user;9  const withUndefined = { ...defaults, ...{ retries: undefined } };10 11  return {12    noArgument: connect(),13    undefinedPort: connect({ port: undefined }),14    nullPort: connect({ port: null }),15    laterWins: { ...defaults, ...{ verbose: true } },16    earlierLoses: { ...{ verbose: true }, ...defaults },17    undefinedStillOverwrites: String(withUndefined.retries),18    publicUser,19    zeroOr: 0 || 10,20    zeroNullish: 0 ?? 10,21  };22}

Deep copies

Spread is shallow: nested objects are shared (lesson 3). For a real deep copy there are two common tools, and they are not equivalent.

• JSON.parse(JSON.stringify(x)) only keeps what JSON can express. A Date becomes a string, a Map or Set becomes {}, keys whose value is undefined or a function disappear, and a cycle throws.
• structuredClone(x) copies Date, Map, Set, typed arrays and cycles correctly. It throws on functions and does not keep a class instance's prototype — you get a plain object back.

freeze is shallow too

Object.freeze(obj) stops properties of obj itself from being added, removed or changed. In strict code a write throws a TypeError; in sloppy code it is silently ignored. Nested objects are not frozen; freezing every level takes a recursive walk, which is the exercise.

1"use strict";2 3export function run() {4  const original = {5    when: new Date(0),6    tags: new Set(["a", "b"]),7    nested: { n: 1 },8    note: undefined,9  };10  const viaJson = JSON.parse(JSON.stringify(original));11  const viaClone = structuredClone(original);12  original.nested.n = 2;13 14  let cloneFunction;15  try {16    structuredClone({ greet() {} });17  } catch (e) {18    cloneFunction = e.name;19  }20 21  const frozen = Object.freeze({ level: 1, inner: { x: 1 } });22  let writeFrozen;23  try {24    frozen.level = 2;25  } catch (e) {26    writeFrozen = e.name;27  }28  frozen.inner.x = 2;29 30  return {31    jsonWhen: typeof viaJson.when,32    jsonTags: viaJson.tags,33    jsonKeepsNote: "note" in viaJson,34    cloneWhenIsDate: viaClone.when instanceof Date,35    cloneTagsIsSet: viaClone.tags instanceof Set,36    cloneNested: viaClone.nested.n,37    cloneKeepsNote: "note" in viaClone,38    cloneFunction,39    writeFrozen,40    frozenInnerX: frozen.inner.x,41  };42}

Common mistakes

• Expecting a default to replace null. An API that sends "port": null gets null, not the default; use ?? if null should fall back too.
• { ...options, ...defaults }. The order is reversed: the defaults overwrite everything the caller passed.
• JSON round trip as a general deep clone. Dates come back as strings and Maps as empty objects — the second example shows both.
• Object.freeze on config with nested sections. The nested sections are still writable.

What interviewers ask

• What is the difference between ?? and ||? — ?? falls back only on null/undefined; || on any falsy value, so 0 || 10 is 10 but 0 ?? 10 is 0.