El operador SPREAD
El operador SPREAD (...) en JavaScript es una herramienta poderosa que permite expandir elementos de un array, objeto u otra estructura iterable en lugares donde se esperan múltiples elementos. Se introdujo en ES6 (ECMAScript 2015) y facilita trabajar con elementos individuales de colecciones.
1. Cómo funciona el Operador SPREAD? #
El operador SPREAD toma una estructura iterable, como un array u objeto, y expande sus elementos en el lugar donde se utiliza. Es lo opuesto al operador REST, que agrupa elementos en un array.
Sintaxis básica:
1...iterable
Uso del Operador SPREAD con Arrays #
El operador SPREAD se utiliza comúnmente para copiar o combinar arrays, así como para pasar elementos de un array como argumentos a una función.
Ejemplo: Copiar un Array:
1let numeros = [1, 2, 3]; 2let copiaNumeros = [...numeros]; 3 4console.log(copiaNumeros); // Muestra [1, 2, 3]Salida de consola [ 1, 2, 3 ]
En este ejemplo:
...numerosexpande los elementos del arraynumerosdentro del nuevo arraycopiaNumeros.copiaNumeroses una copia independiente denumeros.
Ejemplo: Combinar Arrays:
1let primeros = [1, 2, 3]; 2let segundos = [4, 5, 6]; 3let combinados = [...primeros, ...segundos]; 4 5console.log(combinados); // Muestra [1, 2, 3, 4, 5, 6]Salida de consola [ 1, 2, 3, 4, 5, 6 ]
En este ejemplo:
...primerosy...segundosexpanden los elementos de ambos arrays dentro de un nuevo arraycombinados.combinadoscontiene todos los elementos deprimerosysegundos.
Ejemplo: Pasar elementos de un Array como argumentos a una función:
1function sumar(a, b, c) { 2 return a + b + c; 3} 4 5let numeros = [1, 2, 3]; 6let resultado = sumar(...numeros); 7 8console.log(resultado); // Muestra 6Salida de consola 6
En este ejemplo:
...numerosexpande los elementos del arraynumeroscomo argumentos individuales para la funciónsumar.
Uso del Operador SPREAD con Objetos #
El operador SPREAD también se puede usar para copiar y combinar objetos.
Ejemplo: Copiar un Objeto:
1let persona = { nombre: "Juan", edad: 30 }; 2let copiaPersona = { ...persona }; 3 4console.log(copiaPersona); // Muestra { nombre: "Juan", edad: 30 }Salida de consola { nombre: 'Juan', edad: 30 }
En este ejemplo:
...personaexpande las propiedades del objetopersonadentro del nuevo objetocopiaPersona.copiaPersonaes una copia independiente depersona.
Ejemplo: Combinar Objetos:
1let persona = { nombre: "Juan", edad: 30 }; 2let direccion = { ciudad: "Madrid", pais: "España" }; 3let personaCompleta = { ...persona, ...direccion }; 4 5console.log(personaCompleta); // Muestra { nombre: "Juan", edad: 30, ciudad: "Madrid", pais: "España" }Salida de consola { nombre: 'Juan', edad: 30, ciudad: 'Madrid', pais: 'España' }
En este ejemplo:
...personay...direccionexpanden las propiedades de ambos objetos dentro del nuevo objetopersonaCompleta.personaCompletacombina las propiedades depersonaydireccion.
Resumen del tema
Conceptos clave #
- Operador Spread (
...): desempaqueta o expande iterables (arrays, strings, sets) u objetos literales en elementos individuales. - Casos de Uso Principales:
- Clonación superficial (shallow copy):
[...arrayOriginal]y{ ...objetoOriginal }. - Fusión (merge):
[...arr1, ...arr2]y{ ...obj1, ...obj2 }(con sobreescritura de claves repetidas de izquierda a derecha). - Llamadas a Funciones: pasar arrays como argumentos posicionales (
Math.max(...numeros)).
- Clonación superficial (shallow copy):
Qué debes recordar #
Mientras que Rest agrupa elementos en un array, Spread los desempaqueta para clonar, concatenar o alimentar funciones con valores individuales.