Mastering Spread and Rest Operators in JavaScript

Spread and Rest Operators in JavaScript

The spread and rest operators, both represented by three dots (...), are versatile features in JavaScript introduced in ES6. Although they share the same syntax, they serve distinct purposes: the spread operator is used for expanding elements, while the rest operator is used for collecting elements.

1. Spread Operator

The spread operator is used to expand elements of an array, object, or iterable into individual elements.

A. Spreading in Arrays

The spread operator can be used to copy, concatenate, or pass array elements.

Example: Copying Arrays

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

Example: Concatenating Arrays

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

Example: Passing Elements to Functions

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

B. Spreading in Objects

You can use the spread operator to copy or merge objects.

Example: Copying Objects

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // Output: { a: 1, b: 2 }

Example: Merging Objects

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

2. Rest Operator

The rest operator collects multiple elements into a single array or object. It is commonly used in function parameters or destructuring assignments.

A. Using Rest in Function Parameters

The rest operator can collect an indefinite number of arguments into an array.

Example: Collecting Arguments

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

B. Using Rest in Destructuring Arrays

The rest operator collects remaining elements in an array destructuring operation.

Example: Array Destructuring

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]

C. Using Rest in Destructuring Objects

The rest operator collects remaining properties in an object destructuring operation.

Example: Object Destructuring

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

3. Key Differences Between Spread and Rest Operators

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

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

The above is the detailed content of Mastering Spread and Rest Operators in JavaScript. For more information, please follow other related articles on the PHP Chinese website!