Spread Vs Rest

Homework Assignment #16: Rest and Spread

What are the differences between rest and spread?

JavaScript ECMA6 came with cool new features '...' , is new JavaScript functionalists. It can be used in two different ways; as a spread operator OR as a rest parameter.
Rest parameter: collects all remaining elements into an array.
Spread operator: allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.

Rest parameters

From the definition we saw earlier, rest parameters collect all the remaining elements into an array.

Code Editor & preview

</div>
                     <script>
                        var arr = [];
                        var arrTemp = [];
                        var c1 = document.getElementById("c1");
                        c1.innerHTML = squareSelected(1,2,3,4,5,6);

function squareSelected(x,y,...others){
                            for(const prop of others){
                                let temp = prop*prop;
                                arr.push(temp);
                            }
                            console.log(x + " and " +y);
                            arrTemp.push(x + " and " +y +"<br>");
                            console.log(...others);

arrTemp.push(...others);
                            arrTemp.push(" <br>");
                            console.log(...arr);
                            arrTemp.push(...arr);

return arrTemp + " <br> "+ "final Array "+ arr;
                        }

</script>

Note: Rest parameters have to be at the last argument. This is because it collects all remaining/ excess arguments into an array.

Spread Operators

Spread operator helps us to expand the strings or array literals or object literals.

Code Editor & preview

</div>
                     <script>
                        var subject = "mathematics";
                        var arrStr = [...subject];
                        var c11 = document.getElementById("c11");
                        //c1.innerHTML = squareSelected(1,2,3,4,5,6);
                        function createPrint(xx){
                            return `<span> ${xx} </span> <br>`
                        }
                        console.log("split the string " + arrStr);
                        c11.innerHTML = createPrint(arrStr);
                        //It splits the single string into the array of strings

//We can use the spread operator to copy an array.
                        var arrSample = [1, 2, 3];
                        var arr2 = [...arrSample];
                        console.log( "copy of arr2 " +arr2 );
                        var ccc = "copy of arr2 " +arr2 +" <br>";
                        c11.innerHTML = (c11.innerHTML).concat(createPrint(ccc))  ;
                        //Combine arrays
                        var section1 = ["Oparation Theatre","Clinical Room","Lounge"];
                        var section2 = ["Special Room","Semi Special Room","General Ward"];

var allSection = [...section1,...section2];
                        var ccc1 = allSection + "<br>";
                        console.log(allSection);
                        c11.innerHTML = (c11.innerHTML).concat(createPrint(ccc1))  ;
                        //In the above code, we combined section1 and section2 by using the spread operator.

//simple Math.max function
                        var max = Math.max(12,34,56,11);
                        console.log("Use of Math.max Simple way " + max);
                        var ccc2 = "Use of Math.max Simple way " + max + "<br>";
                        c11.innerHTML = (c11.innerHTML).concat(createPrint(ccc2))  ;
                        //now we have array
                        var arrayTemp = [2,5,3,8,1];
                        //now we try to put array as parameter in Math.max function
                        max = Math.max(arrayTemp);
                        console.log("It throws error 'NaN' : " + max);
                        var ccc3 = "It throws error 'NaN' : " + max + "<br>";
                        c11.innerHTML = (c11.innerHTML).concat(createPrint(ccc3))  ;
                        //it answers NaN
                        //here comes spresd operator
                        max = Math.max(...arrayTemp);
                        console.log(" Spread Operators Use in Math.max(...array) : " + max);
                        var ccc4 = " Spread Operators Use in Math.max(...array) : " + max + "<br>";
                        c11.innerHTML = (c11.innerHTML).concat(createPrint(ccc4))  ;

</script>

Homework Assignment #16: Rest and Spread

What are the differences between rest and spread?

Rest parameters

Code Editor & preview

Spread Operators

Code Editor & preview

Summary :