Glossary / Spread syntax

Spread syntax

Spread syntax (...) expands values at a call or literal boundary. In function calls and array literals, it consumes an iterable and supplies its values as individual arguments/elements. In object literals, it copies enumerable own properties. Spread is convenient for composition and shallow copies, but the exact protocol differs by context and it does not recursively clone nested data.

Iterable and property spread

const values = [2, 3];
const combined = [1, ...values, 4]; // [1, 2, 3, 4]

const settings = { color: "blue", size: "m" };
const updated = { ...settings, size: "l" }; // later key wins

Array/call spread requires an iterable. Strings, arrays, Sets, and generator objects are iterable; a plain object is not. Object spread instead enumerates own enumerable string and Symbol properties. It does not preserve the source prototype or property descriptors, and it can invoke getters while reading values. Nested objects remain shared references.

const a = { nested: { enabled: true } };
const b = { ...a };
b.nested.enabled = false;
console.log(a.nested.enabled); // false

Spreading a very large collection into a function call can exceed argument-count limits. Use loops or another API for unbounded data. Object spread precedence is order-sensitive: later properties overwrite earlier ones, including properties with undefined values.

Interview questions

  1. Does object spread deep-clone? No; it copies property values, so nested object references remain shared.
  2. Can a plain object be array-spread? Not unless it implements the iterable protocol.
  3. What wins in { ...a, ...b }? For duplicate keys, the later spread’s value.
  4. Can spread execute code? Yes; getters may run during object spread and iterators execute during iterable spread.

References