Rest parameter and Spread operator in JavaScript

In this article, you’ll learn about Rest parameter and Spread operator in JavaScript with examples, how we use them and when to use.

The ES2018 introduced us to the concept of the `rest` and `spread` operators. Though the ES2015 already introduced us to the `spread` operator, ES2018 further expanded the syntax by adding spread properties to object literals. Both of them become very useful when we need to copy an array or object, or when we need to pass an indefinite amount of arguments into a function. Here, we’ll discuss both the `rest` and `spread` operators.

JavaScript uses three dots (...) for both the rest and spread operators. But these two operators are not the same.

Rest Parameter

It provides an improved way of handling parameters of a function. Using the rest parameter syntax, we can create functions that can take a variable (number of arguments). Any number of arguments will be converted into an array using the rest parameter. It also helps in extracting all or some parts of the arguments.

Rest parameter can be used by applying three dots (…) before the parameters

function addAllArgs(...args){
  let sum=0;
  let i=0;
  while(i<args.length){
    sum+=args[i];
    i++;  
  }
  return sum;
}

console.log(addAllArgs(5,3,5,3));    //16
console.log(addAllArgs(10,30,5,3));    //48

Spread Operator

Although the syntax of spread operator is exactly the same as the rest parameter, spread operator is used to spread an array, and object literals. We also use spread operator where one or more arguments are expected in function call.

const mylap={
  brand:"Hp",
  model:"HS-04",
  color:"Silver",
}


const updatelap={
  type:"Laptop",
  year:"2023",
  color:"grey",
}


const myUpdatedLaptop={...mylap, ...updatelap}
console.log(myUpdatedLaptop);

Output

{ brand: 'Hp',
  model: 'HS-04',
  color: 'grey',
  type: 'Laptop',
  year: '2023' }

One more example ,

Suppose we want to clone all the values inside an array into a new one. Without the spread operator, we’ll have to manually define all the values inside the new array like this,

let arr = [1, 2, 3];
let arr2 = [arr[0], arr[1], arr[2], 4, 5, 6]

But this is not the efficient way, with the help of Spread operator, such operation can be done easily.

let arr = [1, 2, 3];

let arr2 = [...arr, 4, 5, 6];

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

The main difference between rest and spread is that the rest operator puts the rest of some specific user-supplied values into a JavaScript array. But the spread syntax expands iterables into individual elements.

That’s all for this article and with that, it’s a wrap! I hope you found the article useful. Thank you for reading, If you have reached so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback!

Ta da! Having fun learning JavaScript!!