JavaScript - Rest and Spread Operator

The rest operator and the spread operator in JavaScript both use the … syntax, but they serve different purposes depending on where and how they are used. Understanding the distinction between these two is key to writing flexible and efficient JavaScript code.

1. Rest Operator

The rest operator is used to collect multiple elements into a single array (or object) when you don’t know or don’t want to specify how many elements you’re working with. It’s commonly used in function parameters and destructuring assignments to handle a variable number of values.

a. Function Parameters:

When defining a function, the rest operator lets you collect all remaining (or extra) arguments into an array.

Example:

function sum(…numbers) {

    return numbers.reduce((total, num) => total + num, 0);

}

console.log(sum(1, 2, 3)); // 6

console.log(sum(4, 5, 6, 7));  // 22

Here, …numbers collects any number of arguments into an array called numbers. This makes the sum function flexible, as it can handle any number of arguments.

b. Destructuring Arrays:

You can also use the rest operator in destructuring to gather part of an array while extracting specific elements.

Example:

const [first, second, …rest] = [1, 2, 3, 4, 5];

console.log(first); // 1

console.log(second); // 2

console.log(rest);  //[3, 4, 5]

Here, first and second capture the first two elements of the array, and the rest operator (…rest) gathers the remaining elements into a new array called rest.

c. Destructuring Objects:

In object destructuring, the rest operator gathers remaining properties into a new object.

Example:

const person = { name: “John”, age: 30, city: “New York”, country: “USA” };

const { name, …details } = person;

console.log(name);  //John

console.log(details); // { age: 30, city: “New York”, country: “USA” }

Here, name is extracted, and the rest operator gathers the remaining properties (age, city, country) into details.

2. Spread Operator

The spread operator is the opposite of the rest operator. It is used to expand or “spread” an array, object, or any iterable into individual elements. It’s commonly used to copy arrays or objects, merge them, or pass array elements as arguments to a function.

a. Expanding Arrays:

The spread operator expands the elements of an array into individual values.

Example:

const arr = [1, 2, 3];

console.log(…arr); // Outputs: 1 2 3

Here, …arr spreads the array into its individual elements.

b. Copying Arrays:

The spread operator can create a shallow copy of an array, making it easy to duplicate arrays without affecting the original.

Example:

const arr1 = [1, 2, 3];

const arr2 = […arr1];

arr2.push(4);

console.log(arr1);  // [1, 2, 3]

console.log(arr2);  // [1, 2, 3, 4]

arr2 is a new array that contains all the elements of arr1, but modifications to arr2 do not affect arr1.

c. Merging Arrays:

You can easily combine multiple arrays using the spread operator.

Example:

const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];

const mergedArr = […arr1, …arr2];

console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

d. Spreading Objects:

The spread operator can also be used to copy or merge objects.

Example:

const obj1 = { name: “Alice”, age: 25 };

const obj2 = { city: “New York”, age: 30 };

const mergedObj = { …obj1, …obj2 };

console.log(mergedObj); // { name: ‘Alice’, age: 30, city: ‘New York’ }

In this case, obj2 overwrites the age property of obj1 because age: 30 comes after age: 25.

3. Differences Between Rest and Spread Operators

Even though both operators use the same … syntax, their functionality is different based on where they are used: