Table of contents
Let us discuss the difference between the rest and spread operators.
From ES6 onwards, there are these three dots ... used in many places. Also, sometimes they are called as the rest operator. And sometimes the very same three dots are called spread operator. They are used for handling arrays and objects in JavaScript. So let's check it out
Rest Operator
We will begin with the rest operator first. Imagine a situation where you have to create a function called sum, which can take any number of arguments and at the end, it should return the sum of all the parameters passed to it.
Let's start. Here I am creating the function.
function sum(...numbers) {
// code goes here
}
Now I do not know whether there are two parameters passed or maybe three parameters passed. What I just want is that I should be able to pass any number of parameters that should be received by this function.
So for that, I can use three dots and this is called a rest operator.
function sum(...numbers) {
// code goes here
}
So I would say ...numbers. This will create an array of numbers. Let's first of all, try to display this array of numbers.
function sum(...numbers) {
console.log(numbers);
}
Now I'm calling the function with two parameters another call with, let's say, more parameters.
sum(1, 2);
sum(1, 2, 3, 4);
So now, as a user of this function, I do not have any restriction for passing number of parameters.
function sum(...numbers) {
console.log(numbers);
}
sum(1, 2);
sum(1, 2, 3, 4);
The output will be:
[1, 2]
[1, 2, 3, 4]
Now, if we want, we can put a loop we can add the numbers and return them at the end. So this is the purpose of using the rest operator.
function sum(...numbers) {
let result = 0;
for (let i = 0; i < numbers.length; i++) {
result += numbers[i];
}
return result;
}
console.log(sum(1, 2));
console.log(sum(1, 2, 3, 4));
The output will be:
3
10
Limitations
Also, in case if you want that the first parameter of the function should have a rest parameter, you can't do that because the rest parameter always has to be last.
// Incorrect usage of rest parameter
function sum(...numbers, a, b) {
console.log(numbers);
console.log(a);
console.log(b);
}
This will result in a syntax error because the rest parameter has to be the last parameter in the function definition.
Spread Operator
The spread operator is used to spread an array or object into individual elements. It is also represented by three dots ... . Let's take an example of how the spread operator works with arrays:
let numbers = [1, 2, 3, 4];
let numbers1 = [...numbers];
console.log(numbers1); //Output: [1, 2, 3, 4]
let moreNumbers = [5, 6, 7, 8];
let allNumbers = [...numbers, ...moreNumbers];
console.log(allNumbers); // Output: [1, 2, 3, 4, 5, 6, 7, 8]
In the example above, we use the spread operator to concatenate the numbers array and the moreNumbers array into a new array called allNumbers.
Conclusion
In conclusion, the rest and spread operators are powerful tools in JavaScript that allow for more efficient and flexible coding. The rest operator can gather up a group of values and pack them into an array. It is used to capture an indefinite number of arguments as an array.
The spread operator is used to spread the elements of an array or object into another array or object. The spread operator can unpack an array into individual values.
By using these operators, you can write cleaner and more concise code, making your JavaScript programming experience smoother and more enjoyable.
The content of this blog post was inspired by the JavaScript - Marathon Interview Questions Series 2023 course on Udemy