El operador SPREAD en JavaScript

Image for post
Image for post

Spread Operator, ¿qué es?

Copiar un array

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

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

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

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"
// }

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store