Interview question

How do the spread and rest operators work, and how are they different? Spread और rest operators कैसे काम करते हैं, और कैसे अलग हैं?

Answer

Both use the same ... syntax, but spread expands an iterable into individual elements, while rest collects multiple elements into a single array or object.

Operator	Purpose	Context
Spread	Expands array/object into individual items	Function calls, array/object literals
Rest	Collects remaining items into an array/object	Function parameters, destructuring

// SPREAD - arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

const copy = [...arr1]; // shallow copy

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

// SPREAD in function calls
function sum(a, b, c) { return a + b + c; }
const nums = [1, 2, 3];
console.log(sum(...nums)); // 6 - expands array into arguments

// SPREAD to copy with overrides (immutable updates)
const user = { name: 'John', age: 30 };
const updatedUser = { ...user, age: 31 }; // creates new object, doesn't mutate original
console.log(updatedUser); // { name: 'John', age: 31 }

// REST - function parameters, collects remaining args
function multiply(multiplier, ...numbers) {
    return numbers.map(n => n * multiplier);
}
console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]

// REST in destructuring - collects remaining elements
const [firstItem, ...restItems] = [1, 2, 3, 4];
console.log(firstItem, restItems); // 1 [2, 3, 4]

// REST in object destructuring
const { id, ...otherProps } = { id: 1, name: 'John', age: 30 };
console.log(id, otherProps); // 1 { name: 'John', age: 30 }

दोनों same ... syntax use करते हैं, पर spread iterable को individual elements में expand करता है, जबकि rest multiple elements को एक array/object में collect करता है।

Operator	उद्देश्य	Context
Spread	Array/object को individual items में expand करता है	Function calls, literals
Rest	बचे हुए items को array/object में collect करता है	Function parameters, destructuring

// SPREAD - arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

// SPREAD - objects
const obj1 = { a: 1, b: 2 };
const merged = { ...obj1, c: 3 };

// Function calls में
function sum(a, b, c) { return a + b + c; }
const nums = [1, 2, 3];
console.log(sum(...nums)); // 6

// Immutable update
const user = { name: 'John', age: 30 };
const updatedUser = { ...user, age: 31 };

// REST - function parameters
function multiply(multiplier, ...numbers) {
    return numbers.map(n => n * multiplier);
}
console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]

// REST destructuring
const [firstItem, ...restItems] = [1, 2, 3, 4];
console.log(firstItem, restItems); // 1 [2, 3, 4]

const { id, ...otherProps } = { id: 1, name: 'John', age: 30 };

Was this answer clear?

Subjects

Related questions