El Operador de Propagación (Spread Operator), así como su nombre lo dice, se encarga de propagar los elementos de un iterable (array o string) utilizando tres puntos (…
) dentro un array.
const teamPokemon1 = ["pikachu", "eevee", "ratatta"];
const teamPokemon2 = ["piplup", "treecko", "cyndaquil"];
// ✅Spread Operator
const teamPokemon = ["darkus", ...team1, ...team2];
console.log(teamPokemon); // ['darkus', 'pikachu', 'eevee', 'ratatta', 'piplup', 'treecko', 'cyndaquil']
No solo se puede aplicar en array, también puede utilizarse con objetos.
Cómo copiar arrays con el spread operator
Puedes realizar una copia de un array con el Spread Operator, sin embargo debes tener cuidado con la referencia en memoria.
Recuerda que los arrays se guardan como una referencia en la memoria del computador. Al crear una copia, este tendrá la misma refrencia del original. Si cambias algo en la copia, también lo harás en el original. Por ejemplo:
const originalArray = [1,2,3,4,5]
const copyArray = originalArray
copyArray[0] = 0
console.log(originalArray); // [0,2,3,4,5]
console.log(originalArray === copyArray); // true
Para solucionar este problema, usa el Spread Operator para crear una copia del array que utilice una referencia en memoria diferente al original.
const originalArray = [1,2,3,4,5]
const copyArray = [...originalArray] // Copia del original
copyArray[0] = 0
console.log(originalArray); // [1,2,3,4,5]
console.log(copyArray); // [0,2,3,4,5]
console.log(originalArray === copyArray); // false
Cómo unir arrays y añadir elementos con el spread operator
Une dos arrays con el Spread Operator y separandolo por comas.
const array1 = [1,2,3]
const number = 4
const array2 = [5,6,7]
const otherArray = [ ...array1, number, ...array2 ];
console.log(otherArray); // [1,2,3,4,5,6,7]
Cuidado con la copia en diferentes niveles de profundidad
El Spread Operator produce una copia de un solo nivel de profundidad, por lo que si el array tiene más de un nivel de profundidad, en cada nivel tendrá la misma referencia de memoria en la copia y en el original.
El operador de propagación sirve para producir una copia en un solo nivel de profundidad, esto quiere decir que si existen objetos o arrays dentro del array a copiar. Entonces los sub-elementos en cada nivel, tendrán la misma referencia de memoria en la copia y en el original.
const originalArray = [1, [2,3] ,4,5]
const copyArray = [...originalArray]
console.log(originalArray[1] === copyArray[1]); // true
La solución es emplear el operador de propagación para cada elemento en cada nivel de profundidad.
Puede ser esa una opción algo compleja pero hay otra forma de resolverlo y es producir una copia profunda con StructuredClone.
const originalArray = [1, [2,3] ,4,5]
const copyArray = structuredClone(originalArray)
console.log(originalArray === copyArray); // false
console.log(originalArray[1] === copyArray[1]); // false
Este comportamiento también sucede para objetos dentro de otros objetos, u objetos dentro de arrays.
Parámetro rest
El parámetro rest agrupa el residuo de elementos con la sintaxis de tres puntos (...
) seguido de una variable que tiene los elementos del array. Sirve para crear funciones que acepten cualquier número de argumentos para agruparlos en un array.
function hola (primero, segundo, ...resto) {
console.log(primero, segundo) // 1 2
console.log(resto) // [3,4,5,6]
}
hola(1,2,3,4,5)
Incluso puedes obtener los elementos que faltan del array u objeto usando desestructuración.
const objeto = {
nombre: "Andres",
age: 23,
plataforma: "Platzi"
}
const array = [0,1,2,3,4,5]
const {plataforma, ...usuario} = objeto
cons [cero, ...positivos] = array
console.log(usuario) // { nombre: 'Andres', age: 23 }
console.log(positivos) // [ 1, 2, 3, 4, 5 ]
Posición del parámetro rest
El parámetro rest siempre deberá estar en la última posición de los parámetros de la función, caso contrario existirá un error de sintaxis.
// ❌ Mal
functionhola (primero, ...rest, ultimo) { ... }
// SyntaxError: Rest element must be last element.
Diferencias entre el parámetro rest y el operador de propagación
Aunque el parámetro rest y el operador de propagación utilicen la misma sintaxis, son diferentes.
El parámetro rest agrupa el residuo de elementos y siempre debe estar en la última posición, mientras que el operador de propagación expande los elementos de un iterable en un array y no importa en que lugar esté situado.
const array = [1,2,3,4,5]
function doSomething (primero, segundo, ...resto) { // <- Parámetro Rest
console.log(primero, segundo) // 1 2
console.log(resto) // [3,4,5, "final"]
}
doSomething(...array, "final") //<- Operador de propagación
//Lo mismo que hacer -> hola(1,2,3,4,5, "final")
Sigueme en mis redes sociales para más contenido
Más entradas
Novedades de ES9
En este post, exploraremos las principales características introducidas en ES9. Estas características pueden ayudarte a…
Novedades de ES7 en JavaScript
ES7 introdujo dos características nuevas para mejorar el desarrollo en JavaScript. Ahora te enseñaré cuales…
Introducción a Angular: Componentes, Decoradores y Data Binding
En el post de introducción a Angular te hablé en general sobre el framework. En…