DEV Community

Cover image for El operador SPREAD en JavaScript
Alex Tomás
Alex Tomás

Posted on

El operador SPREAD en JavaScript

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'
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

Funciones

let algunosNumeros = [12, 56, 88];

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

addNumeros(...algunosNumeros);
// Resultado -> 156
Enter fullscreen mode Exit fullscreen mode

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"
// }
Enter fullscreen mode Exit fullscreen mode

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"
// }
Enter fullscreen mode Exit fullscreen mode

Puedes ver el código funcionando en este Codepen.

¿Me invitas a un café?

Y esto es todo. Espero que te pueda servir 😉

Oldest comments (2)

Collapse
 
jhhg04 profile image
jhhg04

Master !!
Mas completo y claro imposible.
La única explicación que necesitaba.
¡Gracias,

Collapse
 
eduhsoto profile image
Eduardo Hernández Soto

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...