Rest e spread em

Sobre Rest e spread

O JavaScript tem um operador ... incorporado que facilita o trabalho com um número indefinido de elementos. Dependendo do contexto, chama-se operador rest ou operador spread.

Operador rest

Elementos rest

Quando o ... aparece do lado esquerdo de uma atribuição, esses três pontos são conhecidos como o operador rest. Os três pontos, em conjunto com o nome de uma variável, formam aquilo a que se chama um elemento rest. Recolhe zero ou mais valores e guarda-os num único array.

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

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

Repara que, em JavaScript, ao contrário de algumas outras linguagens, um elemento rest não pode ter uma vírgula final. Tem obrigatoriamente de ser o último elemento numa atribuição por desestruturação. O exemplo abaixo lança um SyntaxError:

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

Propriedades rest

Tal como acontece com os arrays, o operador rest também pode ser usado para recolher uma ou mais propriedades de um objeto e guardá-las num único 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

Quando o ... aparece na definição de uma função, junto ao seu último argumento, esse parâmetro chama-se parâmetro rest. Permite que a função aceite um número indefinido de argumentos sob a forma de um array.

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

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

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

Spread

Elementos spread

Quando o ... aparece do lado direito de uma atribuição, é conhecido como o operador spread. Expande um array numa lista de elementos. Ao contrário do elemento rest, pode aparecer em qualquer posição de uma expressão literal de array e pode haver mais do que um.

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]

Propriedades spread

Tal como acontece com os arrays, o operador spread também pode ser usado para copiar propriedades de um objeto para outro.

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

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