El operador SPREAD en JavaScript
Tags: javascript, tips, spread, operator
Published: 2021-02-15 11:24:43

## 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:

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

```javascript
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](https://alextomas.com/blog/dos-formas-unir-objetos-javascript)):

```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:

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

### Funciones

```javascript
let algunosNumeros = [12, 56, 88];

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

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

### Copiar objetos

```javascript
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:

```javascript
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](https://codepen.io/alextomas80/pen/bGBqwvy).

[![¿Me invitas a un café?](https://alextomas.com/img/ko-fi.png)](https://ko-fi.com/alextomas#checkoutModal)

Y esto es todo. Espero que te pueda servir 😉