Explique los beneficios de la sintaxis extendida y en qué se diferencia de la sintaxis de reposo en ES6.

Operador de extensión: el operador de extensión o la sintaxis de extensión nos permiten expandir las arrays y los objetos en elementos en el caso de una array y pares clave-valor en el caso de un objeto. La sintaxis extendida está representada por tres puntos (…) en JavaScript.

Sintaxis:

var my_var = [...array];

Beneficios de usar la sintaxis Spread:

1. Nos permite incluir todos los elementos de una array u objeto en una lista de algún tipo. Puede expandir un objeto o una array y almacenar todos los valores en una nueva variable del mismo tipo de datos.

Ejemplo:

<script>
    // Operating spread syntax to expand an Object
    var obj1 = {
        organisation: "GFG",
        fullForm: "Geeks for Geeks"
    };
    var obj2 = {
        description: "A learning platform for Geeks."
    };
    var obj3 = {...obj2, ...obj1
    };
    console.log(obj3);
    // Operating spread syntax to expand an Array
    var fruits = ["Mango", "Banana", "Apple"];
    var moreFruits = [...arr1, "Orange",
                "Pineapple", "Watermelon"];
    console.log(moreFruits);
</script>

Producción:

Expansión de una array y un objeto

2. Nos permite copiar todos los elementos de una array ya existente en una nueva array y realizar operaciones push, pop sin siquiera alterar la array anterior.

Ejemplo:

<script>
    // Copying an array into another
    // array and operate pop
    // operation without disturbing
    // data of first array
    var arr1 = ['a', 'b', 'c', 'd', 'e'];
    var arr2 = [...arr1];
    console.log("arr1 before applying pop operation:");
    console.log(arr1);
    arr2.pop();
    console.log("arr1 & arr2 after applying"+
                " pop operation on arr2:");
    console.log(arr2);
    console.log(arr1);
</script>

Producción:

3. Puede concatenar una string o fusionar dos o más arrays sin usar la función concat() .

Ejemplo:

<script>
    // concatenation of two arrays without
    // concat function using spread syntax
    var breakfast = ["Bread", "Sandwich", "Fruits"];
    var moreBreakfast = ["Salad", "Tea & Coffee"];
    console.log("Breakfast before concatenation:");
    console.log(breakfast);
     
    breakfast = [...breakfast, ...moreBreakfast];
    console.log("Breakfast after concatenation:");
    console.log(breakfast);
</script>

Producción:

4. Nos permite operar funciones matemáticas en una array. Porque no podemos usar funciones matemáticas directamente en arrays. El operador de propagación expande una array de objetos iterables en una lista de argumentos que nos permiten operar las funciones matemáticas y obtener el resultado deseado.

Ejemplo:

<script>
    // Operating an array in an Math
    // function using spread operator
    var arr1 = [99, 50, 130, 1, 98, 23, 66];
    console.log("Maximum element of arr1 is:")
    console.log(Math.max(...arr1));
</script>

Producción:

5. Nos permite hacer cambios en el objeto anidado sin reflejarse en el objeto original

Ejemplo : 

Estructura del objeto señalador en objeto anidado

 

let obj = {
   name:'Geeks for Geeks',
   add:{
      country:"INDIA",
      state:{
          code:"DL",
          pincode:"129089"
      }
  }
}
 
let obj2 = {...obj} ///SHALLOW COPY
obj2.name = "GFG",
console.log(obj2);
 
obj2 = {...obj2,add:{...obj.add}}
obj2.add.country = "BHARAT"
console.log(obj2)
 
obj2 = {...obj2,add:{...obj2.add,state:{...obj.add.state}}}  //DEEP COPY
obj2.add.state.pincode  = 823687
 
console.log("original object")
console.log(obj);
console.log("doing all changes final object")
console.log(obj2);

 

Rest operator: La sintaxis del Rest operator es similar a la sintaxis del operador Spread, donde el operador spread expande una array en sus elementos, por otro lado, la sintaxis rest se usa para recopilar datos y almacenarlos en una sola variable que podemos seguir pasar a una función o puede usar en nuestro código como una variable.

Sintaxis:

function nameOfFunction(...data)
{
    // function statement
}

Ejemplo 1: El siguiente ejemplo ilustra el uso de la sintaxis de descanso.

<script>
    var sum = 0;
     
    function Addition(...data) {
        for(var i = 0; i < data.length; i++) {
            sum += data[i];
        }
        console.log("Sum of your passed data is:")
        console.log(sum);
    }
    Addition(95, 98, 2, 51, 6);
</script>

Producción:

Obtener la suma de los datos pasados ​​usando la sintaxis de descanso

Ejemplo 2:

<script>
    var pro = 1;
     
    function Multiplication(...param) {
        for(var item = 0; item < param.length; item++) {
            pro *= param[item];
        }
        if(pro < 100) {
            console.log("Product is less than 100:");
            console.log("Product: ", pro);
            pro = 1;
            console.log("Your new product is: ");
            Multiplication(1, 2, 3, 4, 5);
            console.log("Product: ", pro);
        }
    }
    Multiplication(1, 2, 3, 4);
</script>

Producción:

Obtener el producto de los datos pasados ​​usando la sintaxis de descanso

Las diferencias entre la sintaxis Rest y Spread se incluyen en la siguiente tabla: