Operaciones rest y spread

9.1 Spread (operador de descomposición)

Las operaciones rest y spread en JavaScript ofrecen amplias posibilidades para trabajar con arrays, objetos y funciones. Estas operaciones ayudan a simplificar el código, haciéndolo más expresivo y flexible. En esta lección vamos a revisar en detalle los conceptos básicos de rest y spread, así como sus ejemplos de uso.

El operador spread (...) permite "desempaquetar" arrays y objetos en lugares donde se esperan cero o más elementos. Puede ser útil al copiar, combinar arrays u objetos, así como al pasar argumentos a funciones.

Ejemplo 1: Copia de un array

En este ejemplo, copiedArray es una copia de originalArray.

Aquí el operador … desempaqueta el array en forma de lista de variables, y el operador [] empaqueta el conjunto de variables en un nuevo array:

    
      const originalArray = [1, 2, 3];
      const copiedArray = [...originalArray];

      console.log(copiedArray); // Mostrará: [1, 2, 3]
    
  

Ejemplo 2: Unión de arrays

En este ejemplo, dos arrays array1 y array2 se combinan en un solo array combinedArray.

Aquí el operador … desempaqueta ambos arrays en forma de lista de variables, y el operador [] empaqueta el conjunto de variables en un nuevo array:

    
      const array1 = [1, 2, 3];
      const array2 = [4, 5, 6];
      const combinedArray = [...array1, ...array2];

      console.log(combinedArray); // Mostrará: [1, 2, 3, 4, 5, 6]
    
  

Ejemplo 3: Pasar argumentos a una función

En este ejemplo, el array numbers se descompone en tres argumentos para la función sum():

    
      function sum(a, b, c) {
        return a + b + c;
      }

      const numbers = [1, 2, 3];

      console.log(sum(...numbers)); // Mostrará: 6
    
  

Ejemplo 4: Copia de un objeto

En este ejemplo, copiedObject es una copia de originalObject:

    
      const originalObject = { a: 1, b: 2 };
      const copiedObject = { ...originalObject };

      console.log(copiedObject); // Mostrará: { a: 1, b: 2 }
    
  

Ejemplo 5: Unión de objetos

En este ejemplo, dos objetos obj1 y obj2 se combinan en un solo objeto combinedObject:

    
      const obj1 = { a: 1, b: 2 };
      const obj2 = { c: 3, d: 4 };
      const combinedObject = { ...obj1, ...obj2 };

      console.log(combinedObject); // Mostrará: { a: 1, b: 2, c: 3, d: 4 }
    
  

9.2 Rest (operador de parámetros restantes)

El operador rest (...) permite recopilar varios elementos en un array. Esto es especialmente útil al trabajar con funciones que aceptan un número variable de argumentos, así como al desestructurar arrays y objetos.

Ejemplo 1: Parámetros restantes en funciones

En este ejemplo, la función sum() acepta cualquier cantidad de argumentos y los suma:

    
      function sum(...numbers) {
        return numbers.reduce((acc, num) => acc + num, 0);
      }

      console.log(sum(1, 2, 3)); // Mostrará: 6
      console.log(sum(4, 5, 6, 7)); // Mostrará: 22
    
  

Ejemplo 2: Desestructuración de arrays con rest

En este ejemplo, los dos primeros elementos del array se asignan a las variables first y second, y los elementos restantes se recopilan en el array rest:

    
      const [first, second, ...rest] = [1, 2, 3, 4, 5];

      console.log(first);  // Mostrará: 1
      console.log(second); // Mostrará: 2
      console.log(rest);   // Mostrará: [3, 4, 5]
    
  

Ejemplo 3: Desestructuración de objetos con rest

En este ejemplo, las propiedades a y b se extraen en variables separadas, y las propiedades restantes se recopilan en el objeto rest:

    
      const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };

      console.log(a);  // Mostrará: 1
      console.log(b);  // Mostrará: 2
      console.log(rest); // Mostrará: { c: 3, d: 4 }
    
  

9.3 Aplicación de rest y spread en tareas reales

Ejemplo 1: Unión de arrays con una condición

En este ejemplo, las configuraciones del usuario userSettings sobrescriben los valores predeterminados defaultSettings:

    
      const defaultSettings = { theme: 'dark', showNotifications: true };
      const userSettings = { showNotifications: false, fontSize: 14 };
      const settings = { ...defaultSettings, ...userSettings };

      console.log(settings); // Mostrará: { theme: 'dark', showNotifications: false, fontSize: 14 }
    
  

Ejemplo 2: División de un array en partes

En este ejemplo, el array numbers se divide en dos partes después de extraer los dos primeros elementos:

    
      const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const [first, second, ...rest] = numbers;
      const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
      const secondHalf = rest.slice(Math.floor(rest.length / 2));

      console.log(firstHalf); // Mostrará: [3, 4, 5, 6]
      console.log(secondHalf); // Mostrará: [7, 8, 9, 10]