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
  1. 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]
  2. 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]
  3. 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]
  4. 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 }
  5. 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
  1. 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
  2. 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]
  3. 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

AspectSpread OperatorRest Pattern
Syntax... before the iterable... before the parameter
PurposeExpands elements/propertiesCollects elements/properties
Use in ArraysExpanding, copying, combiningCollecting the remaining elements after destructuring
Use in ObjectsExpanding, copying, combiningCollecting the remaining properties after destructuring
Use in Function ArgumentsNot applicableCollecting 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: 65

9. 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.

Programming README

Homepage