5 ‐ Operador de extensión en JS (Spread Operator) - Jabes-Gonzalez/Checkpoint-8 GitHub Wiki

El operador de extensión (...) es una funcionalidad introducida en ECMAScript 6 (ES6) que permite expandir elementos de estructuras iterables (arrays, objetos, strings) en contextos donde se esperan múltiples elementos, argumentos o pares clave-valor. Simplifica operaciones comunes como copiar, fusionar y manipular datos, mejorando la legibilidad y eficiencia del código.

El operador de extensión (...) descompone un iterable en elementos individuales, facilitando su uso en:

  • Creación de nuevos arrays/objetos.
  • Llamadas a funciones con múltiples argumentos.
  • Fusión de estructuras de datos sin modificar los originales (inmutabilidad). Copiar y fusionar arrays y objetos.
  • Pasar elementos de un array como argumentos individuales a una función.
  • Clonar estructuras de datos de manera superficial (shallow copy).
  • Convertir strings u otros iterables en arrays.
Ejemplo básico:
const numeros = [1, 2, 3];
console.log(...numeros); // 1 2 3

Sintaxis y Tipos de Usos

Con Arrays

image

Ejemplo avanzado:
const frutas = ['manzana', 'banana'];
const nuevasFrutas = [...frutas, 'pera', ...['uva', 'mango']];
console.log(nuevasFrutas); // ['manzana', 'banana', 'pera', 'uva', 'mango']
Con Objetos

image

Ejemplo avanzado:
const usuario = { nombre: 'Ana', edad: 28 };
const direccion = { ciudad: 'Madrid', pais: 'España' };
const perfil = { ...usuario, ...direccion, hobby: 'leer' };
console.log(perfil); // { nombre: 'Ana', edad: 28, ciudad: 'Madrid', pais: 'España', hobby: 'leer' }
En Funciones

image

Ejemplo avanzado:
const datos = [10, 20];
const agregar = (x, y, z) => x + y + z;
console.log(agregar(...datos, 30)); // 60
Con Strings

Convierte strings en arrays de caracteres:

const palabra = 'Hola';
const letras = [...palabra]; // ['H', 'o', 'l', 'a']

Diferencias Clave: Spread vs Rest Operator

image

Buenas Prácticas y Recomendaciones

  • Inmutabilidad: Usa spread para crear copias y evitar efectos secundarios.
const original = [1, 2, 3];
const copia = [...original]; // No modifica el original
  • Prioriza su uso sobre métodos tradicionales como concat() o Object.assign().
  • Evita usarlo en estructuras no iterables (ej: números, booleanos).
  • Ten cuidado con la copia superficial en estructuras anidadas.
  • Evita usar spread en objetos con propiedades getters/setters complejos, ya que solo copia propiedades propias enumerables.

Errores Comunes

  • Modificar el original accidentalmente:
const arr = [1, 2];
const mal = arr; // ¡Error! Ambas variables apuntan al mismo array.
const bien = [...arr]; // Correcto: nueva instancia.
  • Usar spread en objetos no iterables:
const numero = 42;
const error = [...numero]; // TypeError: numero is not iterable
  • Confundir spread con rest operator.
  • Modificar objetos anidados pensando que se copian profundamente.
  • Sobrescribir propiedades sin querer al fusionar objetos.