Spread operator 🧈 and Rest operator💆‍♂️

Spread operator 🧈 and Rest operator💆‍♂️

What are the spread and rest operators in javascript?

In ES6 there are ... these amazing 3 dots!

This syntax ... is very useful in javascript but can also be confusing because it represents two very different uses.

In this article, we will explore two powerful features of ES6. The three magical dots. ... could be used to represent either a spread operator or a rest parameter.

In JavaScript, the three dots operator (…) means two things:

  • The spread operator🧈
  • The rest operator 💆‍♂️

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

Now let's get started 😉

Spread Operator 🧈

Overview: Spread

In Javascript, we use the spread operator to split up array elements or object properties.

Hence, the name spread, i.e., “spread the elements of an array/objects in a new array/objects”.

What Is Spread Operator in JavaScript?🤔

The spread operator is used to divide array elements or properties on objects so that array elements can be added/inserted into new arrays. Here's an example of its use

1.Example of spread operator on array:

const students = ['Sami', 'Chhaku', 'Sam'];
const newStudents = [...students, 'Tom'];
console.log(newStudents);

Output:

[“Sami”, “Chhaku”, “Sam”, “Tom”]

2.Example of spread operator on object:

const student = {
  id: 1,
  firstnName:'Sami'
}
const updatedStudent = {
  ...student,
  lastName: 'Zingare'
}
console.log(updatedStudent);

Output:

{id: 1, firstnName: “Sami”, lastName: “Zingare”}

3.Using the Spread Operator in function calls

function sum(a,b,c){
    return a+b+c;
}

const nums = [1,2,3];

sum(...nums) // 6

Rest Operator 💆‍♂️

Overview: rest

It's a collection of remaining elements. We use it for merging a list of functional arguments into an array, i.e., we can use this when we don't know how many arguments are passed to our method.

Hence, the name rest, i.e., “the rest of the elements”.

What Is the Rest Operator in JavaScript?🤔

Rest parameter is an improved way to handle function parameter, allowing us to more easily handle various input as parameters in a function.

The rest parameter syntax allowed us to represent an indefinite number of arguments as an array.

So, for instance, here is the rest syntax:

...yourValues

The three dots (...) in the snippet above indicates the rest operator. In JavaScript functions, rest gets used as a prefix of the function’s last parameter.

Example of Rest operator in Function

//ES5
function sum(a,b,c,d,e,f){
console.log(a+b+c+d+e+f)
}
sum(1,2,3,4,5,6)

//output
21
  • Here we have just 6 parameters but let just we have infinite numbers of arguments to pass then how we gonna tackle?🤔
  • That's why ES6 introduced the Rest Parameter to make a code much more readable.

Example by using Rest operator

//ES6

function sum(...inputs){

console.log(inputs)//it will give you in the form of an array
//console.log(...inputs)//it will give you direct values

//Now we have to add 

let total = 0;
for (let i of inputs){
total=total+i;
}
console.log(total);
}
sum(1,2,3,4,5,6,7,8,9,10)

Screenshot (97).png

  • In this case, the user can pass as many arguments as he wants.
  • Rest operator will going to take all of them and it will perform an action.

Limitations

Rest parameters take all the remaining arguments of a function and package them in an array. That naturally brings two limitations.

You can use them max once in a function, multiple rest parameters are not allowed.

// This is not valid, multiple rest parameters
function doSomething(first, ...second, ...third) {
}

Conclusion 🙇‍♂️

Thus we saw that Rest Syntax is the opposite of Spread Syntax. The Spread syntax “expands” an array into its elements, while the Rest syntax collects multiple elements and “condenses” them into a single element 😄

Both the rest and spread operator might seem confusing because both of them uses a ... syntax. So, how do we know where to use what? I remember it like this,

  • Spread Unpacks the Elements.
  • Rest Packs the Elements,

Spread Operator.png

Depending on your use case, you can choose which one you need.

Note: The syntax for spread and rest is the same (...), but use-cases differ.

Did you find this article valuable?

Support Chhakuli Zingare by becoming a sponsor. Any amount is appreciated!