¿Cuál es el parámetro de descanso y el operador de propagación en JavaScript?

En Javascript, tanto el operador de extensión como el parámetro de descanso tienen la misma sintaxis, que es tres puntos (…) . Aunque tienen la misma sintaxis, difieren en funciones.

Operador de extensión: el operador de extensión nos ayuda a expandir un iterable, como una array donde se necesitan múltiples argumentos, también ayuda a expandir las expresiones del objeto. En los casos en los que necesitamos todos los elementos de un iterable u objeto para ayudarnos a realizar una tarea, usamos un operador de propagación.

Nota: Puede haber más de un operador de propagación en las funciones de JavaScript.

Sintaxis:

var var_name = [...iterable]; 

Operador de descanso: el parámetro de descanso es inverso al operador de propagación. mientras que el operador de propagación expande los elementos de un iterable, el operador de descanso los comprime. Recoge varios elementos. En funciones cuando requerimos pasar argumentos pero no estamos seguros de cuántos tenemos que pasar, el parámetro rest lo hace más fácil. 

Nota: Solo debe haber un operador de descanso en las funciones de JavaScript.

Sintaxis:

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

Entendamos con ejemplos. 

Ejemplo 1: en el siguiente ejemplo, se definen dos arrays y se fusionan en una utilizando el operador de propagación (…). La array fusionada contiene elementos en el orden en que se fusionan.

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

Producción:

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

Ejemplo 2: en este ejemplo, agregar un elemento a un iterable dado. Se define una array y se le debe agregar un valor, por lo que usamos el operador de propagación para distribuir todos los valores del iterable y luego agregamos los elementos antes o después según el orden que queramos. 

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

Producción:

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

Ejemplo 3:  En este ejemplo, copiaremos objetos usando el operador de extensión. obj2 recibe todas las propiedades de obj1 usando el operador de propagación (…). se deben usar corchetes para especificar que el objeto se está copiando o, de lo contrario, se generará un error. 

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

Producción:

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

Ejemplo 4: En este ejemplo, el parámetro de reposo condensa múltiples elementos en un solo elemento incluso cuando se pasan diferentes números de parámetros a la función, la función funciona como usamos el parámetro de reposo. toma múltiples elementos como argumentos y los comprime en un solo elemento o iterable. más operaciones se realizan en el 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>

Producción:

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