What are rest and spread operators?

Q: What are rest and spread operators?

//Example in Function Parameters: function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3, 4)); // Output: 10 //Example in Array Destructuring: const [first, second, ...rest] = [1, 2, 3, 4, 5]; console.log(rest); // Output: [3, 4, 5] //Example in Object Destructuring: const person = { name: "Alice", age: 25, city: "Mumbai" }; const { name, ...details } = person; console.log(details); // Output: { age: 25, city: "Mumbai" } const numbers = [1, 2, 3]; const moreNumbers = [...numbers, 4, 5]; console.log(moreNumbers); // Output: [1, 2, 3, 4, 5] //Example in Object Spreading: const person = { name: "Alice", age: 25 }; const updatedPerson = { ...person, city: "Mumbai" }; console.log(updatedPerson); // Output: { name: "Alice", age: 25, city: "Mumbai" } //Example in Function Calls: const numbers = [1, 2, 3]; console.log(Math.max(...numbers)); // Output: 3

Difficulty: 5/10

rest parameters, spread syntax, shallow vs deep copy

The rest operator allows you to collect remaining elements or properties into a new array or object. It's often used to handle variable numbers of arguments or to capture parts of data.

The spread operator allows you to 'spread out' elements from arrays, objects, or iterables into individual elements. It's used for copying or merging arrays/objects, or passing elements to functions.

Scenario Questions

0-2 years experience

2-5 years experience

1We have a component that receives a props object and we need to pass all props except 'style' to a child component. How would you use rest/spread to implement this, and what pitfalls might arise?

Follow-up Questions