Operador SPREAD

Introducción

La sintaxis spread ... nos permite esparcir un elemento iterable (arreglo, cadena de texto...) en lugares donde cero o más argumentos/elementos son esperados ( en llamadas a función/arrays literales respectivamente).

También nos permite esparcir un objeto en lugares donde cero o más pares de valor-clave son esperados (en objetos literales).

Sintaxis y ejemplos

Para llamada a funciones

function spreadTest (){
    declaracion
}

spreadTest(...iterable);

Para arreglos literales y string literales

const miArreglo = ['a','b','c'];

const arregloSpread = [1,2,3,...miArreglo];

// Retorna -> Array(6) [ 1, 2, 3, "a", "b", "c" ].

Para objetos literales

const miObjeto = {
        nombre: 'Luis',
        edad: '29',
        fechaDeNacimiento: '01/01/1993'
    }


const objetoSpread = {
        ...miObjeto,
        hobbies: ['Nadar','Cocinar']
}
   /* Retorna 
   Object { nombre: "Luis", edad:"29",fechaDeNacimiento: "01/01/1993",
   hobbies: (2) […] }*/

Resumen

En resumen el operador spread toma los valores del iterable (array literal,objeto literal,string) y los escribe como si los hubieramos escrito cada uno individualmente. Se puede usar en un argumento de una llamada a función, en expresiones de asignación de arrays/objetos y en string literales.

Me gusta pensar que los iterables son cajas que contienen los elementos, y usar el operador spread estariamos esparciendo los elementos para fuera de la caja o volcando los elementos en otra caja.

Aunque el operador spread no cambia el iterable original.

Operador REST

Introducción

El operador rest ... es identico al operador spread, pero se usa con fines diferentes y en un contexto diferente. No se usa para esparcir los elementos, sino para juntar elementos dentro de un array. Se usa en los parámetros de una función y en la desestructuración de arrays (elementos) y objetos (propiedades).

Para entenderlo mejor necesitamos entender el objeto arguments de las funciones.

El objeto arguments

arguments es un objeto similar a un arreglo accesible dentro de cualquier función. Este objeto contiene los valores de los argumentos pasados a la función. Tiene algunas características:

• Es un objeto de tipo array (array-like), que de manera resumida significa que tiene una propiedad length y que no puede acceder a métodos de array como forEach(),pop(),push()` etc...
• Contiene todos los argumentos pasados a una función.
• No es accesible dentro de las funciones de flecha.

   function miFuncion() {
        return arguments;
   }

  miFuncion(1,2,3,'a','b','c'); 
  // Retorna Arguments { 0: 1, 1: 2, 2: 3, 3: "a", 4: "b", 5: "c", … }

Ejemplo

Primero miremos un ejemplo sin parametros preestablecidos:

    function numerosNaturales(...restoNumeros){
        return restoNumeros;
    }

    numerosNaturales(1,2,3,4,5);
    // Retorna Array(5) [ 1, 2, 3, 4, 5 ]

Ahora con parametros establecidos:

    function numerosNaturales(primerNum,segundoNum,...restoNumeros) {
        return `El primer parametro es ${primerNum}
        El segundo parametro es ${segundoNum}
        El resto de parametros son ${restoNumeros}`
    }

    numerosNaturales(1,2,3,4,5);
    /*  Retorna:
         El primer parametro es 1,
         El segundo parametro es 2
         El resto de parametros son 3,4,5
    */

En desestructuración de arreglos:

const paisesEuropa = ['Alemania','Francia','Italia','España','Portugal','Países Bajos'];

const [de,fr,...restoPaises] = paisesEuropa;

console.log(de,fr,restoPaises);
// Retorna Alemania Francia Array(4) [ "Italia", "España", "Portugal", "Países Bajos" ]

En desestructuracion de objetos:

const persona = {
    nombre: 'Luigi',
    alturaCm: 179,
    edad: 21,
    sexo: 'M'
}

const {sexo,edad,...restoPropiedades} = persona;

console.log(sexo,edad,restoPropiedades); 
// Retorna M 21 Object { nombre: "Luigi", alturaCm: 179 }

Resumen

A diferencia del parámetro spread, en lugar de esparcir los elementos, los colectamos dentro de un array. Se puede usar en parametros al definir una función y en desestructuración de arrays y objetos.