Spread & Rest Operators
The three dots (...) act as either a spread operator or rest parameters depending on the context.
Featured Developer Sponsor • Zero-Token Protection
📋 Copy Spread & Rest Operator Patterns Snippet
// Rest Parameters in Function Signatures
function logMessage(level, ...details) {
console.log(`[${level}]`, details.join(" "));
}
// Spread in Object & Array Merging
const base = { active: true, theme: "dark" };
const userConfig = { theme: "light" };
const merged = { ...base, ...userConfig }; // theme becomes 'light'⚠️ 5 Fatal Traps & JavaScript Pitfalls
Trap #1: Spread Operator Creates Strictly Shallow Copies
Spreading an array or object (
const copy = [...items]) only duplicates top-level primitives. Nested objects share the exact same memory references.Trap #2: Call Stack Exceeded on Massive Array Spread
Passing
Math.max(...giantArray) with 100,000+ items overflows JavaScript's maximum function call stack limit, throwing RangeError: Maximum call stack size exceeded. Use reduce().Trap #3: Rest Parameter Must Be the Final Parameter
Writing
function f(...rest, last) is a syntax error. Rest parameters must always be positioned at the very end of parameter lists.Trap #4: Object Spread Precedence Overwriting Defaults
Writing
{ ...userOverrides, ...defaultSettings } allows default settings to overwrite user customizations! Always put defaults first.Trap #5: Spreading Non-Iterables into Arrays
Writing
[...123] or [...null] throws TypeError: ... is not iterable.💬 Frequently Asked Questions
Sponsored Utility
While You're Here
Sponsored Recommendations
Advertisement