Spread vs Rest: The Three Dots That Change Everything in JavaScript

Spread and Rest operators are two important operator of JavaScript. Before go into the difference lets understand them one by one.

Spread Operator

JavaScript spread operator (…) allow the iterable to be expand in place with no function argument in it.

It makes the code cleaner and remove all the looping and coping. Mostly in merging , copying, reducing it uses.

const numers = [1, 2, 3, 4, 5, 6, 7];
console.log(...numers);

The output is

1 2 3 4 5 6 7

We can merge two array using spread operator.

const num1 = [1, 2, 3, 4, 5];
const num2 = [6, 7, 8, 9];

const mergeNumber = [...num1, ...num2];
console.log(mergeNumber);

The output is

[
  1, 2, 3, 4, 5,
  6, 7, 8, 9
]

For copying objects, if we use equal sign (=) then it make a sallow copy means it points to the same reference of the original object.

But using spread operator we can make a deep copy of the object where it copies the object in different reference location.

const obj1 = {
    // object description
}

// it just swallow copy of the obj1 
const obj2 = obj1;

// A deep copy with a different reference
const obj2 = { ...obj1 };

An example of the code is

const obj1 = {
    name: "john",
    age: 54,
}

// we create with same reference
const obj2 = obj1;
obj2.age = 65; // we chage the age in obj2
// but obj2 points to the obj1 reference so it update the age 
console.log(obj1); 

So, the output will be

{ name: 'john', age: 65 }

But using spread operator we can avoid it.

const obj1 = {
    name: "john",
    age: 54,
}

const obj2 = { ...obj1 }; // Make a copy of obj1
obj2.age = 65; // only obj2.age got updated

console.log("Object 1: ", obj1);
console.log("Object 2: ", obj2);

The output will be

Object 1:  { name: 'john', age: 54 }
Object 2:  { name: 'john', age: 65 }

Rest Operator

Rest operators allows any function to accept indefinite number of argument as an array, making the function more flexible.

The Syntax of Rest Operator is

function functionName(parameters, ...restParameter) {
    // code of the function
}

Here is an example of rest operator

function sumofAny(...number) {
    let totalSum = 0;
    // take every element from number array 
    for (const num of number) {
        totalSum += num;
    }
    return totalSum;
}

console.log("Sum of 1 and 2: ", sumofAny(1, 2));

console.log("Sum of many numbers: ", sumofAny(1, 2, 3, 4, 5));

The Output is

Sum of 1 and 2:  3
Sum of many numbers:  15

Now we have a function in which we can put any number of argument and get the sum.

But, the rest operator has some additional syntax restrictions

• The function can only have one rest operator

• The Rest parameter should be the last parameter of the function.

• No trailing comma after the rest parameter.

• Rest parameter can not have default value.

Spread Operator Vs Rest Operator

Feature	Spread Operator	Rest Operator
Action	It unpacks or expands all elements into individual element.	It packs or gather all elements into a single array.
Location	Used in the time of function call.	Used in the function parameters.
Return	A list of independent elements.	A array or object containing multiple elements.

Final Thoughts

Rest and Spread operators are the most important operators in JavaScript and it mostly used in copying, merging elements, mostly used n copying objects by reference and used it everywhere. Mastering Spread and Rest operator and used this in code makes it more easy and clean to use code readability improves.

Reference Article

You can follow the following articles for more understanding

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread\_syntax

• https://www.geeksforgeeks.org/javascript/javascript-spread-operator/

• https://www.w3schools.com/react/react\_es6\_spread.asp

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest\_parameters

• https://www.geeksforgeeks.org/javascript/javascript-rest-operator/

• https://www.w3schools.com/jsref/jsref\_array\_rest.asp

• https://www.geeksforgeeks.org/javascript/what-is-the-rest-parameter-and-spread-operator-in-javascript/

• https://medium.com/@pallavi8khedle/difference-between-spread-and-rest-operator-dc43a86a8991

That's it, now you understand new Spread and Rest Operator in JavaScript. I’d love to hear your thoughts and feedbacks.

Thank You for your patients. ❤️