Tres puntos útiles: el resto y la dispersión en JavaScript

Parámetros de descanso

La sintaxis resto nos permite representar un número indefinido de argumentos como un array. Echa un vistazo a una función que suma todos los argumentos pasados.

const suma = (...args) => args.reduce((prev, current) => prev + current);

console.log(suma(1, 2)); // 3
console.log(suma(1, 2, 3)); // 6

Sintaxis de propagación

El operador spread nos permite expandir objetos iterables en elementos individuales. Esta funcionalidad es opuesta a la que conseguimos con los parámetros restantes. Se puede aplicar a todos los iterables, como arrays, objetos, conjuntos, mapas, etc.

const suma = (x, y, z) => x + y + z;
const números = [1, 2, 3];

console.log(suma(...números)); // 6

Tres puntos en casos reales

Copiar una matriz

La sintaxis spread va efectivamente un nivel más profundo al copiar un array. Un nivel significa que se copia el primer nivel de referencias.

const array0 = [1, [2, 3]];
const array1 = [...array0];

console.log(array1); // [1, [2, 3]]

Crear una matriz de elementos únicos

Crea el Conjunto que almacena sólo elementos únicos y conviértelo de nuevo en un array.

const array = [1, 1, 2, 3];
const uniqueElements = [...new Set(array)];

console.log(uniqueElements); // [1, 2, 3]

Concatenar matrices

const array0 = [1, 2];
const array1 = [3, 4];
const concated = [...array0, ...array1];

console.log(concated); // [1, 2, 3, 4]

Cortar una matriz

const [primerElemento, ...nuevaMatriz] = [1, 2, 3, 4];

console.log(primerElemento); // 1
console.log(nuevaMatriz); // [2, 3, 4]

También podemos eliminar n primeros elementos con coma.

const [, , , ...nuevaMatriz] = [1, 2, 3, 4];

console.log(nuevaMatriz); // [4]

Insertar una matriz al principio de otra matriz

const array0 = [4, 5, 6];
const array1 = [1, 2, 3];
const nuevaMatriz = [...matriz1, ...matriz0];

console.log(nuevaMatriz); // [ 1, 2, 3, 4, 5, 6 ]

Generar una matriz de números del 0 al n

const array = [...Array(10)].map((_, i) => i);

console.log(array); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Desestructurar un objeto

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Crear una copia de un objeto

let persona = {
  nombre: 'Juan',
  edad: 25,
  cartera: {
    suma: 500,
    divisa: 'USD'
  }
};
let personaCopia = { ...persona };

console.log(personaCopia);
// {
// nombre: 'Juan
// edad: 25,
// cartera: {
// suma: 500,
// moneda: 'USD'
// }
// }

Tenga en cuenta que la copia del objeto que se crea es un objeto nuevo con todas las propiedades del objeto original pero ninguna de su información prototípica.

persona.edad = 20;

console.log(persona.edad); // 20
console.log(personaCopia.edad); // 25

Ten en cuenta que la sintaxis spread crea una copia 'superficial' del objeto, por lo que la propiedad 'wallet' sólo se copiará como referencia al subobjeto original. Para una clonación profunda puedes utilizar el método JSON stringify/parse o el método 'cloneDeep' proporcionado por Lodash dependiendo de la complejidad de tu objeto. En algunos casos este método también puede ser útil:

let personaCopia = { ...persona, cartera = {...persona.cartera}}; 

Añadir propiedades a objetos de forma condicional

Podemos añadir condicionalmente propiedades a un nuevo objeto que estamos creando haciendo uso del operador de dispersión junto con la evaluación de cortocircuito.

const colores = {
  rojo '#ff0000
  verde: '#00ff00',
  azul: '#0000ff'
};
const negro = {
  negro: '#000000'
};

let extraNegro = false
let conditionalMerge = {
  ...colores,
  ...(extraNegro ? negro : {})
};

console.log(conditionalMerge);
// {
// rojo: '#ff0000',
// verde: '#00ff00',
// azul: '#0000ff'
// }

extraNegro = true;
conditionalMerge = {
  ...colores,
  ...(extraNegro ? negro : {})
};

console.log(conditionalMerge);
// {
// rojo: '#ff0000',
// verde: '#00ff00',
// azul: '#0000ff'
// negro: '#000000'
// }

Dividir una cadena en caracteres

Esto es similar a llamar al método split con una cadena vacía como parámetro.

const split = [...'qwerty'];
console.log(split); // [ 'q', 'w', 'e', 'r', 't', 'y' ]

Más información:

3 Desafíos comunes del desarrollo de productos de software para startups

El mejor tipo de proyectos para Java

¿Cómo no matar un proyecto con malas prácticas de codificación?