Spread and Rest Operator in JavaScript

(…) this operator is known as both spread and rest operator in JavaScript. Yes it is only one operator but it has two names. It depends on how you use these operators. And that’s the most confusing part. When you will call this spread and when you will call this rest. In this article, I’m going to briefly explain when the same operator is called spread and rest operator.

Rest Operator

(…) we call this operator rest operator inside function parameters.

A function can have any number of arguments.

function sum(a,b){
return a+b;
}
console.log(sum(4,5))

We can have any number of parameters or arguments in while using functions,

// more parameters than arguments
function sum(a,b){
return a+b;
}
console.log(sum(4)) //output: NaN

In this example, we have more parameters than arguments. The parameters will be defined as undefined if it does not receive any value while calling the function. Because, no value is passed either from function call or a default value is not set to the parameters. So, in this example, the value of ‘b’ will be undefined.

Or we can have any number of arguments or parameters in while using functions,

// more arguments than parameters
function sum(a,b){
return a+b;
}
console.log(sum(4,5,6,7)) // output: 9

Here, we have more arguments than parameters. So, the extra number of parameters will not be counted as the function receives two parameters. The remaining arguments will not have any effect on the function.

You have seen in the second example that, while calling the function, we passed 4 arguments, but it receives 2 parameters. And in the first example, the function receives 2 parameters but only 1 argument is passed.

To solve this problem, the rest operator is here.

Just do apply the operator like the example,

function sum(…rest){
let sum = 0;
for(let i =0; i<rest.length; i++){
sum += rest[i]
}
return sum
}
console.log(sum(4,5,6,7)) // output: 22

In this example, you can pass any amount of arguments and use the rest operator like the example (…rest). The value of the rest variable is an array containing all the arguments which is [4, 5, 6, 7]. Then you can add the values using a loop and return the sum.

Or, you can do something like this too,

function sum(a, …rest){
let sum = a;
for(let i =0; i<rest.length; i++){
sum += rest[i]
}
return sum
}
console.log(sum(4,5,6,7)) // output: 22

Here, we have separated the first value of the arguments and used the others using the rest operator. Here, the value of rest is [5, 6, 7].

But, use rest operator as the last parameter, otherwise it will throw an error. Because it takes all the arguments from any position till the last element of the arguments. As a result, any parameter after rest will not get any value from the argument.

function sum(a, …rest, b){ // error : Rest parameter must be last formal parameter
let sum = a;
for(let i =0; i<rest.length; i++){
sum += rest[i]
}
return sum
}
console.log(sum(4,5,6,7))

Spread Operator

(…) we call this operator spread operator while working with arrays, objects, sets etc. It is used to ‘spread’ the elements of the array one by one, which means you can work on the whole iterable in different scenario.

It has a few use cases,

As function arguments,

function sum(a, …rest){
let sum = a;
for(let i =0; i<rest.length; i++){
sum += rest[i]
}
return sum
}
const arr = [4,5,6,7]
console.log(sum(…arr)) // output: 22

Works same as the earlier example. In the last line, all the elements of the array is inserted to the function argument individually. Same as, sum(4,5,6,7)

It works on built in functions too.

let arr = [1,2,3]
console.log(Math.max(…arr)) //output: 3

Combining multiple arrays inside a new array,

let arr = [1,2,3]
let arr1 = [4,5,6]
let newArr = [ …arr, …arr1 , 7]
console.log(newArr) //output: [ 1, 2, 3, 4, 5, 6, 7 ]

Here, we can also add extra individual element to an array.

We can copy an object to another object too.

let obj = {a:1, b:2, c:3}
let objCopy = { …obj }
console.log(objCopy) // output: { a: 1, b: 2, c: 3 }

It can also be used sets. We can solve the problem of getting individual elements of an array only once using spread operator.

let arr = [1,2,1,4,3,3,1]
let newArr = […new Set(arr)]
console.log(newArr) // output: [ 1, 2, 4, 3 ]
We can also use the in strings.
let str= “Hello”
console.log([…str]) //output : [ ‘H’, ‘e’, ‘l’, ‘l’, ‘o’ ]

console.log([…str]) //output : [ ‘H’, ‘e’, ‘l’, ‘l’, ‘o’ ]

Conclusion

It is really confusing when you would call an (…) this as spread and rest. We call this rest when we call parameters of any number in a function. Other than that it is spread operator. Together they help to travel an iterable. And that is the similarity of these two.