DEV Community

loading...
Cover image for El operador SPREAD en JavaScript

El operador SPREAD en JavaScript

Alex Tomás
Frontend developer / React - Vue - Svelte
・2 min read

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 😉

Discussion (0)