Javascript – Rest and spread are important syntaxes to know

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

Spread operator: The spread operator helps us expand an iterable such as an array where multiple arguments are needed, it also helps to expand the object expressions. In cases where we require all the elements of an iterable or object to help us achieve a task, we use a spread operator.

Note: There can be more than one spread operator in javascript functions.
Syntax:

var var_name = [...iterable];

Rest operator: The rest parameter is converse to the spread operator. while spread operator expands elements of an iterable, rest operator compresses them. It collects several elements. In functions when we require to pass arguments but were not sure how many we have to pass, the rest parameter makes it easier.

Note: There must be only one rest operator in javascript functions.

Syntax:

function function_name(...arguments) {
    statements;
}

Let’s understand with examples.

Example 1: In the example below two arrays are defined and they’re merged into one using the spread operator (…). The merged array contains elements in the order they’re merged.

<script>
    var array1 = [10, 20, 30, 40, 50];
    var array2 = [60, 70, 80, 90, 100];
    var array3 = [...array1, ...array2];
   console.log(array3);
</script>

Output:

[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

Example 2: In this example, appending an element to a given iterable. An array is defined and a value needs to be appended to it, so we use the spread operator to spread all the values of the iterable and then add the elements before or after according to the order we want. 

<script>
    var array1 = [10, 20, 30, 40, 50];
    var array2 = [...array1, 60];
    console.log(array2);
</script>

Output:

[10, 20, 30, 40, 50, 60]

Example 3: In this example, we will copy objects using the spread operator. obj2 is given all the properties of obj1 using the spread operator(…). curly brackets must be used to specify that object is being copied or else an error gets raised.

<script>
    const obj = {
        firstname: "Divit",
        lastname: "Patidar",
    };
    const obj2 = { ...obj };
    console.log(obj2);
</script>

Output:

{
    firstname: "Divit",
    lastname: "Patidar"
}

Example 4: In this example, rest parameter condensing multiple elements into a single element even when different numbers of parameters are passed into the function, the function works as we used the rest parameter. it takes multiple elements as arguments and compresses them into a single element or iterable. further operations are performed on the iterable. 

<script>
    function average(...args) {
        console.log(args);
        var avg =
            args.reduce(function (a, b) {
                return a + b;
           }, 0) / args.length;
        return avg;
    }
    console.log("average of numbers is : "
        + average(1, 2, 3, 4, 5));
    console.log("average of numbers is : "
        + average(1, 2, 3));
</script>

Output:

[1, 2, 3, 4, 5]
"average of numbers is : 3"
[1, 2, 3]
"average of numbers is : 2"