JavaScript Spread Operator: Expand Arguments and Override Properties

The task

Pass a short dimension array to a function, then build configuration from defaults and an override. Test whether a nested options object was cloned independently.

Runnable Node 22 example

const assert = require('node:assert/strict');

function area(width, height) { return width * height; }
const dimensions = [4, 6];
assert.equal(area(...dimensions), 24);
const defaults = {theme: 'light', panel: {dense: false}};
const settings = {...defaults, theme: 'dark'};
assert.equal(settings.theme, 'dark');
assert.equal(defaults.theme, 'light');
assert.equal(settings.panel, defaults.panel);
settings.panel.dense = true;
assert.equal(defaults.panel.dense, true);
console.log(`area=${area(...dimensions)}; theme=${settings.theme}; shared=${defaults.panel.dense}`);

Expected output and explanation

The two array elements become width and height in the function call. In the object literal, theme is copied first and then replaced by dark, leaving the original top-level theme unchanged.

The panel reference is still shared. Updating its dense field reaches the same object from defaults. Property copying is therefore different from recursively duplicating configuration data. The dedicated array-copy exercise explores independent nested records rather than repeating this override case.

Pitfall to check

Order changes the result: placing defaults after the theme override would replace that override. Do not spread an unbounded collection into a function call and assume the engine accepts unlimited arguments. This example has exactly two.