JavaScript - Rest Parameter

Rest Parameter :

The rest parameter is introduced in ECMAScript 2015 or ES6, which improves the ability to handle parameters. The rest parameter allows us to represent an indefinite number of arguments as an array. By using the rest parameter, a function can be called with any number of arguments.

Before ES6, the arguments object of the function was used. The arguments object is not an instance of the Array type. Therefore, we can't use the filter() method directly. The rest parameter is prefixed with three dots (...). Although the syntax of the rest parameter is similar to the spread operator, it is entirely opposite from the spread operator. The rest parameter has to be the last argument because it is used to collect all of the remaining elements into an array.
Syntax : 
    function fun(a, b, ...theArgs) {  
        // statements  
    }
Eg : 
    < !DOCTYPE html>
    < html>
    < body>
    < h1>JavaScript Functions< /h1>
    < h2>The Rest Parameter< /h2>
    < p>The rest parameter (...) allows a function to treat an indefinite number of arguments as an array:< /p>
    < p id="demo">< /p>

    < script>
        function sum(...args) {
        let sum = 0;
        for (let arg of args) sum += arg;
            return sum;
        }

        let x = sum(2, 5, 10, 25, 30, 101, 35, 51);

        document.getElementById("demo").innerHTML = x;
    < /script>

    < /body>
    < /html>
Output :
js-res-par-1

Rest Parameters and Destructuring :
Destructuring means to break down a complex structure into simpler parts. We can define an array as the rest parameter. The passed-in arguments will be broken down into the array. Rest parameter supports array destructuring only. By using the rest parameter, we can put all the remaining elements of an array in a new array.
Eg :
    var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];    
        
    // destructuring assignment    
    var [a,b,...args] = colors;    
    console.log(a);     
    console.log(b);     
    console.log(args);
Output :
Violet
Indigo
[ 'Blue', 'Green', 'Yellow', 'Orange', 'Red' ]

Rest Parameter in a dynamic function :
JavaScript allows us to create dynamic functions by using the function constructor. We can use the rest parameter within a dynamic function.
Example :
    let num = new Function('...args','return args');  
    console.log(num(10, 20, 30));
Output :
[ 10, 20, 30 ]

Spread Parameter

Eg: 
    < !DOCTYPE html>
    < html>
    < body>

    < script>
        const numbersOne = [1, 2, 3];
        const numbersTwo = [4, 5, 6];
        const numbersCombined = [...numbersOne, ...numbersTwo];

        document.write(numbersCombined);


        document.write("< br>");
        document.write("-------------------");

        const numbers = [1, 2, 3, 4, 5, 6];

        const [one, two, ...rest] = numbers;

        document.write("< p>" + one + "< /p>");
        document.write("< p>" + two + "< /p>");
        document.write("< p>" + rest + "< /p>");
    < /script>

    < /body>
    < /html>
Output :
1,2,3,4,5,6
-------------------
1

2

3,4,5,6

We can use the spread operator with objects too : 
    < !DOCTYPE HTML>
    < html>
    < script>
        const myVehicle = {
        brand: 'Ford',
        model: 'i20',
        color: 'black'
        }

        const updateMyVehicle = {
        type: 'car',
        year: 2021, 
        color: 'yellow'
        }

        const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

        //Check the result object in the console:
        console.log(myUpdatedVehicle);
    < /script>
    < body>
    < p>Press F12 and see the result object in the console view.< /p>
    < /body>
    < /html>
Output :
Press F12 and see the result object in the console view.

(JS - String)