Spread and Rest Operators in JavaScript

Have you ever seen or used … (three dots) operator in JavaScript. This operator is known as Spread and also the Rest depending on how it is used. Let’s go through both of them one by one.

Spread Operator

let myArray = [ 1 , 2 , 3 , 4 , 5 ];

let newArray = [...myArray] 

// newArray will have all the elements of myArray
// i.e. newArray = [ 1 , 2 , 3 , 4 , 5 ];

Spread syntax allows us an iterable such as Array or String and also Object to expand to its elements one by one. spread operator can be included in three distinct places.

1. Spread in function call

   Suppose we have pass multiple arguments to pass the function and we have those arguments stored in a array

    let myArray = [ 1 , 2 , 3 ];
   
    function myFunction (a, b, c ) {
          return a + b + c;
    };
   

   To pass the elements of array as arguments to this function we can do below

    myFunction(myArray[0], myArray[1], myArray[2])
   

   or we need use Function.prototype.apply() to pass the elements of an array as arguments to a function.

    myFunction.apply(null, myArray);
   

   insted we can use spread syntax to pass elements of array to the function

    myFunction(...myArray)
   

2. Spread in Array literal

   suppose we have to copy elements of one array into the another array, we need to use .push() .slice() .concat method to do so. But with Spread we don’t need to do so.

    let marvelHeros = ["Spider Man", "Iron Man", "Hulk", "Dr. Strange"];
    let dcHeros = ["Super Man", "Flash", "Bat Man"]
   
    let allHeros = [...marvelHeros, ...dcHeros]
    // ["Spider Man", "Iron Man", "Hulk", "Dr. Strange", "Super Man", "Flash", "Bat Man"]
   

   we can spared anywhere in array and it creates shallow copy of the array and does not modifies the original arrays.

3. Spread in Object literal

   similarly in Object if we want copy or merge two or more objects together we can use the spread operator for it.

    const obj1 = { fname: "Tony", age: 34 };
    const obj2 = { lname: "Stark" , title: "Iron Man" };
   
    const mergedObj = { ...obj1, ...obj2 };
    // { name: "Tony", age: 34, lname: "Stark" , title: "Iron Man" }
   

   If in a multiple object we have properties with a identical name it will take last value assigned to that property and remaining as it is

    const obj1 = { fname: "Tony", age: 34 };
    const obj2 = { fname: "Steve" , title: "Captain" };
   
    const mergedObj = { ...obj1, ...obj2 };
    // { name: "Steve", age: 34, title: "Captain" }
   

Rest Operator

Rest is opposite of Spread, where in spread we are spreading elements one by one in other hand in Rest we collects the parameter together in the form of array. Its mostly used in the function that’s why I said the parameters.

function myFunc (name, age, ...args) {
      console.log(args) // ["one", "two", "three", "four", "five", "six"]
}

myFunc("Bruce", 39, "one", "two", "three", "four", "five", "six")

There are some restrictions with a rest syntax that we need to follow:

• Single function can have only one rest

• The rest parameters should always be the last part of function definition.

• Trailing commas are not allowed after the rest parameter.

• The rest parameter cannot have a default value.

Wrapping It up

The JavaScript spread and rest operators, represented by three dots (...), serve dual purposes. The spread operator allows for the expansion of iterables like arrays, strings, and objects into individual elements or properties, streamlining function calls, array literals, and object merging. Conversely, the rest operator collects multiple function arguments into an array, facilitating manipulation. This article explores their usage with examples, highlighting distinctions, best practices, and restrictions associated with each operator.