What is the Difference between Spread and Rest Operator in JavaScript?

The spread operator was introduced in JavaScript with ES 6, which adds several great features that make working with arrays and function parameters easier. One such feature introduced with ES 6 (ECMAScript is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers) is the addition of a spread operator. As the name suggests, the spread operator “spreads” the values in an array or a string across one or more arguments. For example, take a look at this example.

Output

This method works, but we are required to remember the concat function to perform this operation. It would be easier if we could have simply returned the combined array like const c = [a,b]. Let us take a look at what happens if we try this approach in JavaScript.

Output

Here, we end up with a nested array; instead, we can use a loop, but it will require us to write a lot of code for relatively simple and frequent operations. With the introduction of the spread operator, we can accomplish such a task with much less code. The spread operator (…) takes an array and spreads its values. Take a look at the below example to see how it works:

Output

Here, the spread operator (…) takes the values of array a and b and spreads them into a new array c. The spread operator can also be used in function calls. We will look at several use cases of the spread operator later in this article.

What is the Rest Operator in Javascript?

The rest operator was also introduced in JavaScript with the ES 6, and both the rest and spread operator uses three dots (…). Let us look at an example to see the problem that the rest operator helps simplify.

Output

This is how we would have written our function before the introduction of ES 6 because the argument object is not an array, and we are required first to convert it to an array using the Array.from method and then use it. Although this method is correct and works but is a lot more complicated. The rest operator in JavaScript provides a way to achieve the same results in a lot cleaner and easier way to work with indefinite parameters. Let’s see how the same results can be achieved with the rest parameters.

Output

Here, with the help of rest parameters which, like the spread operator, use three dots (…), we can pass indefinite parameters to a function. For example, all the parameters in the above code are available inside the function in args as an array. This method of using the rest operator makes our code easier to read and removes unnecessary lines in code.

What is the Difference Between Spread and Rest Operators in Javascript?

Although both operators in JavaScript have identical syntax, i.e., three dots (…), these operators are not the same and perform different tasks.

The main difference between the two operators lies in their names. The spread operator in JavaScript expands values in arrays and strings into individual elements whereas, the rest operator, puts the values of user-specified data into a JavaScript array. Let us take a look at the below example to understand this difference:

Output

In the above example, we are using the rest operator …otherArgs in the function parameter to put the values passed in the function call (3, 4, 5, 6) into an array. Similarly, using the spread operator during the function call helps spread elements of an array into individual elements to the function spreadAndRest.

Examples for Spread Operator in Javascript

Let us see the uses of the spread operator in different cases in JavaScript.

1. In array literals

Output

Here, the spread operator (...) is used to copy the values of an array myLocations into a different array friendsLocations.

2. Use spread operator to separate strings to individual array items

Output

In the above example, we used the spread operator (...) within an array to separate individual characters in the string collegeName. This is why "IIT DELHI" got expanded to ['I', 'I', 'T', ' ', 'D', 'E', 'L', 'H', 'I'].

3. Spread operator in function call

Output

In the above example, we used the spread operator (...) to expand the functionArgs array's content across four parameters of the function multiplyNumbers. If more than four numbers are passed to the function, the function considers starting four values and ignores the remaining values.

4. Spread operator with Objects

Output

In the above snippet, we used the spread operator (...) inside object bio to expand array name values into individual properties in the object. Also, remember spread operator cannot expand the object literal's values. But it can be used to clone JavaScript objects, as shown below.

Output

Examples for Rest Operator in Javascript**

Now that we have understood the uses of the spread operator, let's see examples of the rest operator in JavaScript.

1. Rest operator in function parameter

Output

Here, we can make an observation from the Output that the rest operator accumulates the arguments passed to the function testRest into a JavaScript array.

2. Rest operator in destructuring assignment

The rest operator can be used for destructuring the last variables in assignments. This is shown in the code snippet mentioned below.

Output

In the above example, the rest operator (...) adds the remaining values passed by the user into an array and assigns the value to the otherInfo variable. We can also call ...otherInfo as a rest variable.

Learn About Comparison Operators in JavaScript

Now that you are familiar with the spread and rest operator in JavaScript, you can read more about

• Comparison operators in JavaScript