JavaScript Spread operator vs Rest operator

The spread operator and rest operator are two features introduced in ECMAScript 2015 (ES6) for working with arrays and objects in JavaScript. While they may look similar, they serve different purposes and are used in different contexts.

Spread Operator (…): The spread operator is represented by three dots (…) and is mainly used to expand elements of an array or properties of an object. It allows you to “spread” the elements of an iterable (like an array or a string) or the properties of an object into another array or object.

Here are some use cases of the spread operator:

• Array literals: They can be used to create a new array by expanding the elements of an existing array.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]

• Object literals: They can be used to create a new object by spreading the properties of an existing object.

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 }; // { x: 1, y: 2, z: 3 }

• Function arguments: These can be used to pass individual elements of an array as arguments to a function.

const numbers = [1, 2, 3];
function sum(a, b, c) {
  return a + b + c;
}
const result = sum(...numbers); // 6

Rest Operator (…): The rest operator also uses three dots (…) but is used in a different context. It allows you to represent an indefinite number of function arguments as an array. Inside a function declaration or function expression, you can use the rest parameter to capture multiple arguments into a single array.

Here’s an example of the rest operator:

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

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

To summarize:

• The spread operator is used to unpack elements or properties from an iterable (array, string, object) and spread them into another array or object.
• The rest operator is used to capture multiple function arguments into a single array.

JavaScript Spread operator vs Rest operator example

Here’s an example that demonstrates the use of both the spread operator and rest operator in JavaScript:

// Spread Operator Example
const numbers = [1, 2, 3, 4, 5];

// Spread the elements of 'numbers' into a new array
const newArray = [...numbers, 6, 7, 8];

console.log(newArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8]

// Rest Operator Example
function sum(...args) {
  // 'args' is an array containing all the arguments passed to the function
  return args.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(sum(1, 2)); // Output: 3

Output:

Here’s a tabular comparison of the spread operator and rest operator in JavaScript:

Comment if you have any doubts or suggestions on this Js Operator topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version