Default Parameters, Rest & Spread Syntax

In Plain English

JavaScript parameters allow default fallback values if omitted or passed as undefined. The rest operator (...args) collects multiple arguments into an array, while the spread operator expands arrays or objects into individual elements.

The Mental Model

"Rest parameters are like a laundry bag gathering loose socks into a single bundle (...items). Spread syntax is dumping that bag out flat on a table to inspect each sock individually."

Deep Dive: How It Works

Default Parameters: function greet(name = "Guest") prevents undefined values.

Rest Operator (...args): Must be the last parameter in the function signature and collects remaining arguments into an array.

Spread Operator (...arr): Clones or combines arrays and objects shallowly: const merged = [...a, ...b];.

Syntax Blueprint

function sum(...nums) { ... } | const combined = [...arr1, ...arr2]

Use ... to gather arguments into an array or spread elements across a new structure.

Core Rules to Remember

Default Values: function test(x = 10) sets fallback when x is undefined.

Rest Parameters: Captures arbitrary number of arguments into a real JavaScript Array.

Spread Syntax: Expands iterables into lists, function arguments, or new array literals.

Common Beginner Traps & How to Fix Them

Mistake:Placing rest parameters before other named parameters.

Why it happens: function test(...rest, last) is a syntax error because rest must be the final parameter.

How to fix: Always place ...rest as the very last item in the parameter list.

Pro Tip: Use object spread { ...defaults, ...overrides } to cleanly create immutable configuration objects.

Live Interactive Example

Hit Run Code to see it live

Rest Parameters and Spread Merging

JavaScript ES2024

Output Console

Click "Run Code" to view the rendered output.

How it works: Demonstrates gathering variable arguments and spreading arrays into a merged list.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Merge arrays with spread syntax

Given const core = ["CPU", "RAM"]; and const extra = ["GPU", "SSD"];
Create const hardware = [...core, ...extra];
Print "Hardware: CPU, RAM, GPU, SSD" using hardware.join(", ").

Sandbox Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

Deep Dive: How It Works

Default Parameters: function greet(name = "Guest") prevents undefined values.

Rest Operator (...args): Must be the last parameter in the function signature and collects remaining arguments into an array.

Spread Operator (...arr): Clones or combines arrays and objects shallowly: const merged = [...a, ...b];.