Spread and Rest Operators

Learn how to use JavaScript spread and rest operators effectively with easy examples for arrays, objects, and functions to help you write cleaner, more efficient code.

Loading...
Spread and Rest Operators

Syntax of spread operator:

...spread

Syntax of rest operator:

...rest

In JavaScript, both spread and rest operators use the same syntax, but they do different things depending on the context.

Spread operator expands (spreads out) elements, while rest operator collects (gathers) elements into a single variable.

Let’s understand both with simple examples.

Spread Operator

The spread operator (...) allows you to expand elements of an array or object.

Spread in Arrays

const colors = ["red", "green"];
const moreColors = [...colors, "blue", "yellow"];
 
console.log(moreColors); // Output: ["red", "green", "blue", "yellow"]

Here,

  • colors is an array.
  • ...colors uses the spread operator to unpack the elements inside the colors array.
  • That means it will take everything from the colors array and pull the values out one by one. Here you’re not copying the array, you’re spreading its items out into a new array.
  • So ...colors becomes, "red", "green" and then you're adding "blue" and "yellow" after that.
  • You created a new array without affecting the original one.

Copying Arrays

const original = [1, 2, 3];
const copy = [...original];
 
copy.push(4);
 
console.log(original); // Output: [1, 2, 3]
console.log(copy); // Output: [1, 2, 3, 4]

Here,

  • original is an array.
  • copy = [...original] uses the spread operator to create a new array with the same values.
  • That means it'll take out the values from original and make a new array with them.
  • You created a new array without affecting the original one.
  • Then copy.push(4) adds 4 to the new array copy, not the original.

Merge Arrays

const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
 
console.log(merged); // Output: [1, 2, 3, 4]

Here,

  • ...a spreads the values: 1, 2
  • ...b spreads the values: 3, 4
  • So, const merged = [...a, ...b]; becomes const merged = [1, 2, 3, 4];

Spread in Objects

const admin = { name: "Shefali" };
const profile = { ...admin, age: 26 };
 
console.log(profile); // Output: { name: "Shefali", age: 26 }

Here,

  • admin is an object.
  • ...admin uses the spread operator to copy all properties from admin into a new object.
  • Then age: 26 is added to that new object.
  • So the new object profile becomes { name: "Shefali", age: 26 }.

If two properties have the same name, the one written later will replace the earlier one.

For example:

const admin = { name: "Shefali" };
const update = { name: "Learnify" };
 
const result = { ...admin, ...update };
 
console.log(result); // Output: { name: "Learnify" }

Rest Operator

The rest operator (...) allows you to collect multiple values into a single variable.

Rest in Array Destructuring

const colors = ["red", "green", "blue", "yellow"];
const [first, ...others] = colors;
 
console.log(first); // Output: "red"
console.log(others); // Output: ["green", "blue", "yellow"]

Here,

  • The array colors has four items.
  • [first, ...others] = colors; is destructuring the array:
    • first gets the first item "red".
    • ...others uses the rest operator to gather all remaining items into a new array.
  • So first is "red" and others is ["green", "blue", "yellow"].

Rest in Object Destructuring

const admin = { name: "Shefali", age: 26, country: "India" };
const { name, ...rest } = admin;
 
console.log(name); // Output: "Shefali"
console.log(rest); // Output: { age: 26, country: "India" }

Here,

  • The object admin has three properties.
  • { name, ...rest } = admin; destructures the object:
    • name gets the value "Shefali".
    • ...rest uses the rest operator to collect all other properties into a new object.
  • So name is "Shefali" and rest is { age: 26, country: "India" }.

Rest in Function Parameters

You can use rest operator to accept any number of arguments.

For example:

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

Learn more about reduce method!

Here,

  • The ...numbers in the function parameter uses the rest operator to collect all arguments into an array called numbers.
  • Inside the function, numbers.reduce((a, b) => a + b, 0) adds up all the numbers in the array.
  • So when you call sum(1, 2, 3, 4), it adds all those numbers and returns 10.

Tip: The spread operator is often used to copy or merge arrays/objects, while the rest operator is used to collect remaining elements or skip some values.

Support my work!