Double standard Operator in Javascript

in this arcticle we are going to checkout a quarkyness of javascript operator which behave differently during the code writing

Spread Operator

spread operator is use to spread out the value inside in the complex object like array and string.
in real case, you can assume it like spreading butter or jam on the bread whatever you like to eat. but here is an interesting catch.

Object are not iterator by default so, you can't spread object

Spread is introduced in the ES6 in 2015 and works across all modern browsers, effectively serving as the opposite of the rest operator, which condenses elements.

// 1. Concatenating Arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; 
// Output: [1, 2, 3, 4, 5, 6]

// 2. Copying an Array (Shallow Copy)
const original = [1, 2, 3];
const copy = [...original];
copy.push(4); 
// original: [1, 2, 3], copy: [1, 2, 3, 4]

// 3. Merging Objects
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 }; 
// Output: { a: 1, b: 3, c: 4 } (obj2 overrides obj1's 'b')

// 4. Passing Array Elements as Function Arguments
function sum(a, b, c) { return a + b + c; }
const nums = [1, 2, 3];
const result = sum(...nums); 
// Output: 6

// 5. Expanding Strings into Characters
const str = "Hello";
const chars = [...str]; 
// Output: ['H', 'e', 'l', 'l', 'o']

Rest operator

Rest operator is same as spread operator but behave differently and perform opposite functionality in javascript.

gathers remaining arguments into a single array within a function or destructuring assignment. It allows functions to accept an indefinite number of arguments, bundling them as an actual array so that array methods like push, map, or reduce can be used directly.

// Function with rest parameter
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(sum(5, 10, 15));  // Output: 30

// Destructuring with rest
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(rest); // Output: [3, 4, 5]

Key Differences

Feature	Spread Operator	Rest Operator
Primary Function	Expands an iterable (array, string) into separate elements.	Collects multiple elements or arguments into a single array.
Common Usage	Array literals, function calls, object literals.	Function parameters, array/object destructuring.
Position	Can be used anywhere in an array literal or function call.	Must be the last parameter in a function or destructuring assignment.
Effect	"Splits" data (e.g., `[1, 2, 3]` becomes `1, 2, 3`).	"Gathers" data (e.g., `1, 2, 3` becomes `[1, 2, 3]`).

Important Notes

The rest parameter is a real array, allowing the use of array methods like map() or forEach(), unlike the legacy arguments object.
You cannot use "use strict" inside a function that contains a rest parameter; it must be placed outside the function.
In object destructuring, the rest operator gathers remaining properties into a new object, whereas in array destructuring, it gathers remaining elements into an array.

Conclusion

In this article we explored the “double standard” behavior of the spread and rest operators in JavaScript. The key idea is simple but important: the spread operator (...) expands or distributes values (typically from iterables like arrays and strings), while the rest operator uses the same syntax but performs the opposite job—collecting remaining values into a single array (most commonly in function parameters or destructuring). A common gotcha is that plain objects are not iterable by default, so you can’t use spread in contexts that require an iterable—another place where the operators’ behavior can surprise developers.

Takeaways

Spread: expands elements from iterables (arrays, strings). Useful for copying, concatenating, and passing elements as arguments.
Rest: gathers remaining function arguments or remaining elements/property values into an array. Enables variadic functions and flexible destructuring.
Quirk to remember: objects aren’t iterables, so spreading them where an iterable is required will fail—though object-property spread (copying properties in object literals) is a related language feature introduced later and has its own use cases.
Use these operators to write clearer, more concise code, but be mindful of the type you’re spreading/gathering.

Final tip: when in doubt, ask whether you’re trying to “expand” values (use spread) or “collect” values (use rest), and check whether the value is iterable before using spread in iterable contexts.