El operador SPREAD en JavaScript

#javascript #tips #spread #operator

Spread Operator, ¿qué es?

El spread operator que incorpora ECMAScript 6 en JavaScript es un operador que simplifica la recogida de valores en una estructura de datos. Su representa con tres puntos: ...

La definición que nos da MDN es: "Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected."

Lo que quiere decir que este operador distribuye los elementos dentro de un iterable (cadena de texto, array o cualquier cosa que se pueda recorrer) dentro de un receptor. ¿Sigue sonando a chino verdad? Vamos a verlo con ejemplos de uso:

Copiar un array

Podemos utilizar el operador spread para copiar arrays:



let animales = ['perro', 'caballo', 'gato', 'oso', 'jirafa'];
console.log(animales); // Resultado -> 'perro', 'caballo', 'gato', 'oso', 'jirafa'

let copiaDeAnimales = [...animales];
console.log(copiaDeAnimales); // Resultado -> 'perro', 'caballo', 'gato', 'oso', 'jirafa'

Copiar un array y añadirle elementos

Podemos hacer copias de arrays y además añadir elementos al array, tanto al principio como al final de éste.



let poblaciones = ['Benicasim', 'Castellón', 'Alcocebre'];
console.log(poblaciones);
// Resultado -> ["Benicasim", "Castellón", "Alcocebre"]

let nuevasPoblaciones = ['Oropesa', ...poblaciones];
console.log(nuevasPoblaciones);
// Resultado -> ["Oropesa", "Benicasim", "Castellón", "Alcocebre"]

let masPoblacionesNuevas = [...poblaciones, 'Madrid'];
console.log(masPoblacionesNuevas);
// Resultado -> ["Benicasim", "Castellón", "Alcocebre", "Madrid"]

Concatenar arrays

De una forma sencilla, podemos concatenar arrays (esto lo vimos en el artículo Dos formas de unir objetos en JavaScript):



let peces = ['emperador', 'salmón'];
let insectos = ['hormiga', 'mosquito'];
console.log([...peces, ...insectos]);
// Resultado -> ["emperador", "salmón", "hormiga", "mosquito"]

Esto también funciona con arrays de diferentes tipos de datos, por ejemplo:



let numeros = [1, 2, 3];
let meses = ['enero', 'febrero', 'marzo'];
console.log([...numeros, ...meses]);
// Resultado -> [1, 2, 3, "enero", "febrero", "marzo"]

Funciones



let algunosNumeros = [12, 56, 88];

const addNumeros = (a, b, c) => {
    console.log(a + b + c);
}

addNumeros(...algunosNumeros);
// Resultado -> 156

Copiar objetos



const usuario = {
    nombre: 'Alex',
    apellido: 'Tomás',
    edad: 40
}

const copiaDeUsuario = {...usuario};
console.log(copiaDeUsuario);
// Resultado
// Object {
//   apellido: "Tomás",
//   edad: 40,
//   nombre: "Alex"
// }

Concatenar y añadir nuevas propiedades a un objeto

Tal como se puede hacer con los arrays, pasa con los objetos:



const coche = {
    marca: 'Peugeot',
    modelo: '207',
}
const caracteristicas = {
    color: 'Azul',
    cv: '115',
}

const automovil = {...coche, ...caracteristicas};
console.log(automovil);
// Resultado
// Object {
//   color: "Azul",
//   cv: "115",
//   marca: "Peugeot",
//   modelo: "207"
// }

const extras = {...automovil, 'aacc': true };
console.log(extras);
// Resultado
// Object {
//   aacc: true,
//   color: "Azul",
//   cv: "115",
//   marca: "Peugeot",
//   modelo: "207"
// }

Puedes ver el código funcionando en este Codepen.

Y esto es todo. Espero que te pueda servir 😉

Top comments (3)

Eduardo Hernández Soto • Sep 16 '22

Hola me encontré con tu post mientras buscaba este operador. Tengo algunas dudas, cuando usamos una función para cambiar un objeto esto lo hace, sin embargo pareciera que se crea otra nueva propiedad para el, como tener name dos veces con distintos valores. Aunque si lo hacemos con spread para darle un nuevo valor, este como decías se crea una copia del objeto y a su vez queda intacto como tal queda el mismo valor. Entonces ¿Para cambiar propiedades del objeto debemos hacerlo con spread? Te adjunto de dónde lo vi, casi al último segundo youtube.com/shorts/VLSs9w2WL8g?fea...