✨ JavaScript Spread & Rest Operator

? Quick Overview

The spread and rest operators both use the ... syntax in JavaScript, but they behave differently based on context. Spread expands values, while rest collects values. These features make working with arrays, objects, and functions much more flexible and expressive.

? Key Concepts

Spread expands arrays, objects, or iterable values into individual elements.
Rest collects multiple values into a single array (mainly in function parameters or destructuring).
Both use the same syntax (...) but serve opposite purposes depending on where they are used.

? Syntax & Theory

Spread syntax: [...array], { ...object }, fn(...argsArray)
Rest parameters: function fn(...params) {} – collects all remaining arguments in one array.
Rest in destructuring (array): const [first, ...rest] = arr;
Rest in destructuring (object): const { key, ...restObj } = obj;
In short: spread = expand, rest = collect.

? Spread Operator (...) in JavaScript

The spread operator expands an iterable into individual elements. It is commonly used for copying, merging, and passing array values into functions.

? View Code Example

// Spread in arrays
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

// Spread in objects
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

// Spread in function calls
const nums = [10, 20, 30];
console.log(Math.max(...nums)); // 30

? Rest Operator (...) in JavaScript

The rest operator groups multiple elements into a single array. It appears in function parameters and destructuring assignments, helping you handle “the rest” of the data in a clean way.

? View Code Example

// Rest in function parameters
function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

// Rest in array destructuring
const [first, ...restArr] = [10, 20, 30, 40];
console.log(first); // 10
console.log(restArr); // [20, 30, 40]

// Rest in object destructuring
const { a, ...restObj } = { a: 1, b: 2, c: 3 };
console.log(a); // 1
console.log(restObj); // { b: 2, c: 3 }

? Key Differences

Spread expands elements; rest collects elements.
Spread is used in function calls, array literals, and object literals.
Rest is used in function parameters and in array/object destructuring.
They share the same ... syntax but behave differently depending on context.

? Live Output & Explanation

? What the code prints

arr2 becomes [1, 2, 3, 4, 5] because we spread arr1 and add extra values.
obj2 becomes { a: 1, b: 2, c: 3 } – a shallow copy of obj1 with one more property.
Math.max(...nums) passes 10, 20, 30 as separate arguments and returns 30.
sum(1, 2, 3, 4) uses rest to collect all arguments into numbers and returns their total: 10.
Array destructuring stores 10 in first and the remaining values in restArr.
Object destructuring stores 1 in a and the remaining properties in restObj.

? Tips & Best Practices

Use spread instead of manual loops to clone or merge arrays and objects.
Use rest parameters for clean function signatures that handle a variable number of arguments.
Combine destructuring with rest to extract specific keys or values while keeping the remainder.
Remember: spread/rest work with shallow copies, not deep copies.

? Try It Yourself / Practice Tasks

Create a function using rest that multiplies any number of parameters and returns the product.
Use spread to merge two arrays and then remove duplicates using a Set.
Destructure an object using rest to separate a few specific properties while keeping the rest in another object.
Refactor a function that uses the old arguments object to instead use rest parameters.