- English Version -
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.
📓 Spread Operator
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:
let numbers = [1, 2, 3, 4];
console.log( ...numbers );
// => 1 2 3 4
Add an array to another:
let customers = [ 'Claudia', 'Borja', 'May' ];
let otherCustomers = [ 'Sergio', 'Jose' ];
customers.push( ...otherCustomers );
console.log( customers );
// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
Concat arrays:
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:
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:
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:
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]
📓 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.
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.
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 😃
🔍 Recommended reading
- MDN Web Docs Javascript - Spread Operator
- How to Use the Spread Operator (…) in JavaScript
- MDN Web Docs Javascript - Rest Parameters
- Javascript.info - Rest Parameters / Spread
Thank you for reading 🙏
🌎 https://sergioturpin.es
📷 Instagram
🐦 Twitter
🐙 GitHub
- Versión en Español -
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 😊
📓 Spread Operator
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:
let numeros = [1, 2, 3, 4];
console.log( ...numeros );
// => 1 2 3 4
Lo utilizo también para añadir un array a otro:
let clientes = [ 'Claudia', 'Borja', 'May' ];
let otrosClientes = [ 'Sergio', 'Jose' ];
clientes.push( ...otrosClientes );
console.log( clientes );
// => [ 'Claudia', 'Borja', 'May', 'Sergio', 'Jose' ]
Para concatenar arrays:
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:
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:
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:
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]
📓 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.
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.
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 😃
🔍 Lecturas recomendadas
- Entendiendo Spread Operator - Platzi
- MDN Web Docs - Spread Operator
- Operador Spread - Desarrolloweb
- MDN Web Docs - Rest Parameters
- W3 Club Docs - Rest Parameters
Gracias por leer 🙏
Top comments (0)