Rest y spread en

Acerca de Rest y spread

JavaScript tiene un operador ... incorporado que facilita trabajar con un número indefinido de elementos. Según el contexto, se llama operador rest u operador de propagación.

Operador rest

Elementos rest

Cuando ... aparece en el lado izquierdo de una asignación, esos tres puntos se conocen como el operador rest. A los tres puntos junto con un nombre de variable se les llama un elemento rest. Recoge cero o más valores y los guarda en un solo array.

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

Ten en cuenta que en JavaScript, a diferencia de algunos otros lenguajes, un elemento rest no puede tener una coma final. Debe ser el último elemento en una asignación por desestructuración. El ejemplo de abajo lanza un SyntaxError:

const [...items, last] = [2, 4, 8, 16]

Propiedades rest

De manera similar a los arrays, el operador rest también puede usarse para recoger una o más propiedades de objeto y guardarlas en un solo objeto.

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

Parámetros rest

Cuando ... aparece en la definición de una función junto a su último argumento, ese parámetro se llama parámetro rest. Permite que la función acepte un número indefinido de argumentos como un array.

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

Propagación

Elementos de propagación

Cuando ... aparece en el lado derecho de una asignación, se conoce como el operador spread. Expande un array en una lista de elementos. A diferencia del elemento rest, puede aparecer en cualquier lugar de una expresión literal de array, y puede haber más de uno.

const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];

oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];

woow;
// =>  ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]

Propiedades de propagación

De manera similar a los arrays, el operador de propagación también puede usarse para copiar propiedades de un objeto a otro.

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }