Spread Operator and Rest Parameters
Tags: beginners, javascript, node, webdev
Published: 2021-11-20 18:43:10

###<center>- English Version -</center>
---

There are many pages wich explain what the **Spread Operator** (also know as _three dots_) and **Rest Parameters** are. 

It is an operator that I really like and I would like to share with you some ways that I use it.
     
:notebook: **Spread Operator**
    
   
```javascript
let numbers = [1, 2, 3, 4];
console.log( numbers );

// => [ 1, 2, 3, 4 ] (print as array)
```
When we use the spread operator we get the values ​​independently:

```javascript
let numbers = [1, 2, 3, 4];
console.log( ...numbers );

// => 1 2 3 4
```
Add an array to another:

```javascript
let customers = [ 'Claudia', 'Borja', 'May' ];
let otherCustomers = [ 'Sergio', 'Jose' ];

customers.push( ...otherCustomers );
console.log( customers );

// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
```
Concat arrays:
```javascript
let customers = [ 'Claudia', 'Borja', 'May' ];
let otherCustomers = [ 'Sergio', 'Jose' ];

let concatCustomers = [ ...customers, ...otherCustomers ];
console.log( concatCustomers );

// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
```
It also happens with objects:
```javascript
const userData = {
    name: 'Jesús',
    surname: 'Cano',
    age: 8
}

const userAdrress = {
    address: 'C/ Gran Vía',
    number: 34
}

const data = { ...userData, ...userAdrress };
console.log( data );

// => (Output)
// {
//     name: 'Jesús',
//     surname: 'Cano',
//     age: 8,
//     address: 'C/ Gran Vía',
//     number: 34
// }
```
Destructuring on objects:
```javascript
const userData = {
    name: 'Jesús',
    surname: 'Cano',
    age: 8
}

const userAdrress = {
    address: 'C/ Gran Vía',
    number: 34
}

let myObject = { ...userData, ...userAdrress }; 
let { name, address } = { ...myObject };

console.log( 'Name:', name, 'Address:', address );

// => Name: Jesús Adrress: C/ Gran Vía
```
Cleaned up repeated elements from an array:
```javascript
let numbers = [ 1, 2, 2, 3, 3, 4, 5, 6, 6, 6, 6, 7 ];

let mySelect = new Set( numbers );
numbers =  [ ...mySelect ];

console.log( numbers );

// => [1, 2, 3, 4, 5, 6, 7]
```
   
   
:notebook: **Rest Parameters**

Spread operator can also be used as a **Rest Parameters**, rest of the parameters that are passed to a javascript function and form an array.

```javascript
const person = ( name, ...qualities ) => {

    console.log(`${name}'s qualities are: `);

    qualities.map( quality => {
        console.log( quality );
    });

}

person( 'Jaime', 'Sympathetic', 'Nice', 'Affective', 'Talkative' );

// => (Output)
// Jaime's qualities are: 
// Sympathetic
// Nice
// Affective
// Talkative
```
As you can see above, the rest parameters must be at the end, otherwise we will get an error.

```javascript
const sumNumbers = ( ...args ) => {
    return args.filter( e => typeof e === 'number' )
        .reduce( (prev, curr) => prev + curr );
};

const result = sumNumbers( 1, null, 'fullstack', 5, undefined, 2 );

console.log( result );

// => 8
```
The possibilities are endless :smiley:
   
   
**:mag: Recommended reading**
- [MDN Web Docs Javascript - Spread Operator](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
- [How to Use the Spread Operator (…) in JavaScript](https://medium.com/coding-at-dawn/how-to-use-the-spread-operator-in-javascript-b9e4a8b06fab)
- [MDN Web Docs Javascript - Rest Parameters](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/rest_parameters)
- [Javascript.info - Rest Parameters / Spread](https://javascript.info/rest-parameters-spread)
   
   
Thank you for reading :pray:  
   
:earth_americas: [https://sergioturpin.es](https://sergioturpin.es)
:camera: [Instagram](https://instagram.com/sergioturpin)
:bird: [Twitter](https://twitter.com/sergio_turpin)
:octopus: [GitHub](https://github.com/sturpin)



###<center>- Versión en Español -</center>
---
Hay muchas páginas que explican qué es el **Spread Operator** (también conocido como operador de los tres puntos) y los **Rest Parameters**.

Es un operador que me gusta mucho y me gustaría compartir con vosotros alguna de las situaciones que suelo utilizarlo :blush:
   
:notebook: **Spread Operator**

```javascript
let numeros = [1, 2, 3, 4];
console.log( numeros );

// => [ 1, 2, 3, 4 ] (se imprime como un array)
```
Cuando utilizamos el Spread Operator obtenemos los valores de manera independiente:

```javascript
let numeros = [1, 2, 3, 4];
console.log( ...numeros );

// => 1 2 3 4
```
Lo utilizo también para añadir un array a otro:
```javascript
let clientes = [ 'Claudia', 'Borja', 'May' ];
let otrosClientes = [ 'Sergio', 'Jose' ];

clientes.push( ...otrosClientes );
console.log( clientes );

// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
```
Para concatenar arrays:
```javascript
let clientes = [ 'Claudia', 'Borja', 'May' ];
let otrosClientes = [ 'Sergio', 'Jose' ];

let concatenaClientes = [ ...clientes, ...otrosClientes ];
console.log( concatenaClientes );

// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
```
Lo suelo utilizar también con objetos:
```javascript
const datosUsuario = {
    nombre: 'Jesús',
    apellido: 'Cano',
    edad: 8
}

const direccionUsuario = {
    direccion: 'C/ Gran Vía',
    numero: 34
}

const datos = { ...datosUsuario, ...direccionUsuario };
console.log( datos );

// => (Output)
// {
//     nombre: 'Jesús',
//     apellido: 'Cano',
//     edad: 8,
//     direccion: 'C/ Gran Vía',
//     numero: 34
// }
```
También para desestructuración de objetos:
```javascript
const datosUsuario = {
    nombre: 'Jesús',
    apellido: 'Cano',
    edad: 8
}

const direccionUsuario = {
    direccion: 'C/ Gran Vía',
    numero: 34
}

let miObjeto = { ...datosUsuario, ...direccionUsuario }; 
let { nombre, direccion } = { ...miObjeto };

console.log( 'Nombre:', nombre, 'Dirección:', direccion );

// => Nombre: Jesús Dirección: C/ Gran Vía
```

Para limpiar elementos repetidos en un array:
```javascript
let numeros = [ 1, 2, 2, 3, 3, 4, 5, 6, 6, 6, 6, 7 ];

let miSeleccion = new Set( numeros );
numeros =  [ ...miSeleccion ];

console.log( numeros );

// => [1, 2, 3, 4, 5, 6, 7]
```
:notebook: **Rest Parameters**
    
Spread operator se puede utilizar como un **Rest Parameters**, el resto de parámetros son pasados a la función javascript y ya con ellos forma un array.

```javascript
const persona = ( nombre, ...cualidades ) => {

    console.log(`Las cualidades de ${nombre} son: `);

    cualidades.map( cualidad => {
        console.log( cualidad );
    });

}

persona( 'Jaime', 'Simpático', 'Agradable', 'Afectivo', 'Charlatán' );

// => (Output)
// Las cualidades de Jaime son: 
// Simpático
// Agradable
// Afectivo
// Charlatán
```
Como puedes ver, el **Rest Parameters** está colocado al final, de otra manera nos devolvería un error.

```javascript
const sumaNumeros = ( ...args ) => {
    return args.filter( e => typeof e === 'number' )
        .reduce( (prev, curr) => prev + curr );
};

const resultado = sumaNumeros( 1, null, 'fullstack', 5, undefined, 2 );

console.log( resultado );

// => 8
```
Las posibilidades son infinitas :smiley:

**:mag: Lecturas recomendadas**
- [Entendiendo Spread Operator - Platzi](https://platzi.com/contributions/entendiendo-el-spread-operator-en-javascript/?utm_source=google&utm_medium=paid&utm_campaign=14603491644&utm_adgroup=&utm_content=&gclid=CjwKCAiA1uKMBhAGEiwAxzvX90fxG8-kqRVKY0fphPi9gwOpHWurX978HobwLzyfBS7vmLBHQ7dRuBoCbcIQAvD_BwE&gclsrc=aw.ds)
- [MDN Web Docs - Spread Operator](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
- [Operador Spread - Desarrolloweb](https://desarrolloweb.com/articulos/operador-spread-es6.html)
- [MDN Web Docs - Rest Parameters](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/rest_parameters)
- [W3 Club Docs - Rest Parameters](https://docs.w3cub.com/javascript/functions/rest_parameters)


Gracias por leer :pray:  
   
:earth_americas: [https://sergioturpin.es](https://sergioturpin.es)
:camera: [Instagram](https://instagram.com/sergioturpin)
:bird: [Twitter](https://twitter.com/sergio_turpin)
:octopus: [GitHub](https://github.com/sturpin)