Spread Operator (...)
The spread operator allows an iterable (like an array or a string) to be expanded into individual elements. It can also be used to copy and merge objects.
Use Cases
-
Expanding Arrays:
- You can use the spread operator to expand an array into individual elements.
Example:
const arr = [1, 2, 3]; const newArr = [...arr, 4, 5]; console.log(newArr); // Output: [1, 2, 3, 4, 5] -
Combining Arrays:
- You can combine multiple arrays into one.
Example:
const arr1 = [1, 2]; const arr2 = [3, 4]; const combinedArr = [...arr1, ...arr2]; console.log(combinedArr); // Output: [1, 2, 3, 4] -
Copying Arrays:
- You can create a shallow copy of an array.
Example:
const arr = [1, 2, 3]; const copiedArr = [...arr]; console.log(copiedArr); // Output: [1, 2, 3] -
Expanding Objects:
- You can use the spread operator to expand an object into individual properties.
Example:
const obj = { a: 1, b: 2 }; const newObj = { ...obj, c: 3 }; console.log(newObj); // Output: { a: 1, b: 2, c: 3 } -
Combining Objects:
- You can combine multiple objects into one.
Example:
const obj1 = { a: 1 }; const obj2 = { b: 2 }; const combinedObj = { ...obj1, ...obj2 }; console.log(combinedObj); // Output: { a: 1, b: 2 }
Rest Pattern (…)
The rest pattern allows you to represent an indefinite number of arguments as an array. It is often used in function parameters to handle multiple arguments.
Use Cases
-
Function Parameters:
- You can use the rest pattern to collect all remaining arguments into an array.
Example:
function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3)); // Output: 6 console.log(sum(4, 5)); // Output: 9 -
Array Destructuring:
- You can use the rest pattern to collect the remaining elements of an array after destructuring.
Example:
const [first, ...rest] = [1, 2, 3, 4]; console.log(first); // Output: 1 console.log(rest); // Output: [2, 3, 4] -
Object Destructuring:
- You can use the rest pattern to collect the remaining properties of an object after destructuring. Example:
const { a, ...others } = { a: 1, b: 2, c: 3 }; console.log(a); // Output: 1 console.log(others); // Output: { b: 2, c: 3 }
Comparison
| Aspect | Spread Operator | Rest Pattern |
|---|---|---|
| Syntax | ... before the iterable | ... before the parameter |
| Purpose | Expands elements/properties | Collects elements/properties |
| Use in Arrays | Expanding, copying, combining | Collecting the remaining elements after destructuring |
| Use in Objects | Expanding, copying, combining | Collecting the remaining properties after destructuring |
| Use in Function Arguments | Not applicable | Collecting multiple arguments into an array |
Concrete Examples
Individual Examples
1. Spread Operator Example: Combining Arrays
const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArr = [...arr1, ...arr2];
console.log(combinedArr); // Output: [1, 2, 3, 4]2. Rest Pattern Example: Function Arguments
function concatenateStrings(...strings) {
return strings.join(' ');
}
console.log(concatenateStrings("Hello", "world!")); // Output: "Hello world!"
console.log(concatenateStrings("How", "are", "you?")); // Output: "How are you?"3. Spread Operator Example: Expanding Objects
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // Output: { a: 1, b: 2, c: 3, d: 4 }4. Rest Pattern Example: Object Destructuring
const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(a); // Output: 1
console.log(others); // Output: { b: 2, c: 3 }Examples where both the rest pattern and the spread operator are used
5. Combining Arrays and Collecting Remaining Elements
// Combining Arrays using Spread Operator
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const combinedNumbers = [...numbers1, ...numbers2];
console.log(combinedNumbers); // Output: [1, 2, 3, 4, 5, 6]
// Function that uses Rest Pattern to collect arguments
function logNumbers(first, second, ...rest) {
console.log('First:', first);
console.log('Second:', second);
console.log('Rest:', rest);
}
logNumbers(...combinedNumbers); // Output: First: 1, Second: 2, Rest: [3, 4, 5, 6]6. Copying and Merging Objects and Collecting Remaining Properties
// Copying and Merging Objects using Spread Operator
const person = { name: 'John', age: 30 };
const job = { title: 'Developer', company: 'Tech Corp' };
const employee = { ...person, ...job };
console.log(employee); // Output: { name: 'John', age: 30, title: 'Developer', company: 'Tech Corp' }
// Function that uses Rest Pattern to collect remaining properties
function describePerson({ name, age, ...rest }) {
console.log('Name:', name);
console.log('Age:', age);
console.log('Other details:', rest);
}
describePerson(employee); // Output: Name: John, Age: 30, Other details: { title: 'Developer', company: 'Tech Corp' }7. Merging Arrays and Filtering Elements
// Merging Arrays using Spread Operator
const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'spinach'];
const food = [...fruits, ...vegetables];
console.log(food); // Output: ['apple', 'banana', 'carrot', 'spinach']
// Function that uses Rest Pattern to collect remaining elements
function filterFood(first, ...rest) {
console.log('First food item:', first);
console.log('Remaining food items:', rest.filter(item => item !== 'carrot'));
}
filterFood(...food); // Output: First food item: apple, Remaining food items: ['banana', 'spinach']8. Spreading into Function Arguments and Collecting Additional Arguments
// Using Spread Operator to pass array elements as function arguments
const points = [10, 20, 30];
function calculateSum(a, b, c) {
return a + b + c;
}
console.log(calculateSum(...points)); // Output: 60
// Function that uses Rest Pattern to collect additional arguments
function calculateTotal(initial, ...values) {
return initial + values.reduce((sum, value) => sum + value, 0);
}
console.log(calculateTotal(5, ...points)); // Output: 659. Cloning and Updating Objects and Extracting Properties
// Cloning and Updating Objects using Spread Operator
const book = { title: '1984', author: 'George Orwell' };
const updatedBook = { ...book, year: 1949 };
console.log(updatedBook); // Output: { title: '1984', author: 'George Orwell', year: 1949 }
// Function that uses Rest Pattern to extract specific properties
function printBookDetails({ title, ...details }) {
console.log('Title:', title);
console.log('Details:', details);
}
printBookDetails(updatedBook); // Output: Title: 1984, Details: { author: 'George Orwell', year: 1949 }Summary
- The spread operator (…) is used to expand elements of an iterable or properties of an object. It’s useful for copying, combining, and spreading arrays and objects.
- The rest pattern (…) is used to collect multiple elements into an array or remaining properties into an object. It’s commonly used in function parameters and destructuring.