Uma introdução ao operador de propagação e parâmetro de descanso em JavaScript (ES6)

Tanto o operador de espalhamento quanto o parâmetro restante são escritos como três pontos consecutivos (...). Eles têm mais alguma coisa em comum?

O operador de propagação (...)

O operador de propagaçãofoi introduzido no ES6. Ele fornece a capacidade de expandir objetos iteráveis ​​em vários elementos. O que isso realmente significa? Vamos verificar alguns exemplos.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

Impressões:

Leon Love Realmente Senhor dos Anéis
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Impressões:

1 4 5 7

Você pode notar que tanto o array do primeiro exemplo quanto o conjunto do segundo foram expandidos em seus elementos individuais (strings e dígitos respectivamente). Como isso pode ter alguma utilidade, você pode perguntar.

O uso mais comum é provavelmente a combinação de matrizes. Se você já teve que fazer isso antes do operador de propagação, provavelmente usou o concat()método.

const shapes = ["triangle", "square", "circle"];const objects = ["pencil", "notebook", "eraser"];const chaos = shapes.concat(objects);console.log(chaos);

Impressões:

[“Triângulo”, “quadrado”, “círculo”, “lápis”, “caderno”, “borracha”]

Isso não é tão ruim, mas o que o operador de propagação oferece é um atalho, que torna seu código muito mais legível também:

const chaos = [...shapes, ...objects];console.log(chaos);

Impressões:

[“Triângulo”, “quadrado”, “círculo”, “lápis”, “caderno”, “borracha”]

Aqui está o que obteríamos se tentássemos fazer o mesmo sem o operador spread:

const chaos = [shapes, objects];console.log(chaos);

Impressões:

[Matriz (3), Matriz (3)]

O que aconteceu aqui? Em vez de combinar os arrays, obtivemos um chaosarray com o shapesarray no índice 0 e o objectsarray no índice 1.

O parâmetro restante (...)

Você pode pensar no parâmetro resto como o oposto do operador de propagação. Assim como o operador spread permite que você expanda um array em seus elementos individuais, o parâmetro rest permite que você agrupe os elementos de volta em um array.

Atribuição de valores de uma matriz a variáveis

Vamos dar uma olhada no seguinte exemplo:

const movie = ["Life of Brian", 8.1, 1979, "Graham Chapman", "John Cleese", "Michael Palin"];const [title, rating, year, ...actors] = movie;console.log(title, rating, year, actors);

Impressões:

“Life of Brian”, 8.1, 1979, [“Graham Chapman”, “John Cleese”, “Michael Palin”]

O parâmetro rest nos permite pegar os valores do moviearray e atribuí-los a várias variáveis ​​individuais usando a desestruturação. Dessa forma title, ratinge yearsão atribuídos os três primeiros valores na matriz, mas é onde a verdadeira mágica acontece actors. Graças ao parâmetro rest, actorssão atribuídos os valores restantes do moviearray, na forma de um array.

Funções variáveis

As funções variáveis ​​são funções que aceitam um número indefinido de argumentos. Um bom exemplo é a sum()função: não podemos saber antecipadamente quantos argumentos serão passados ​​para ela:

sum(1, 2);sum(494, 373, 29, 2, 50067);sum(-17, 8, 325900);

Em versões anteriores do JavaScript, esse tipo de função era tratado usando o objeto de argumentos, que é um objeto semelhante a um array, disponível como uma variável local dentro de cada função. Ele contém todos os valores dos argumentos passados ​​para uma função. Vamos ver como a sum()função pode ser implementada:

function sum() { let total = 0; for(const argument of arguments) { total += argument; } return total;}

Funciona, mas está longe de ser perfeito:

  • Se você olhar para a definição da sum()função, ela não tem parâmetros. Isso pode ser bastante enganoso.
  • Pode ser difícil de entender se você não estiver familiarizado com o objeto de argumentos (como em: de onde diabos estão argumentsvindo ?!)

Veja como escreveríamos a mesma função com o parâmetro rest:

function sum(...nums) { let total = 0; for(const num of nums) { total += num; } return total;}

Observe que o for...inloop também foi substituído pelo for...ofloop. Tornamos nosso código mais legível e conciso ao mesmo tempo.

Aleluia ES6!

Você está apenas começando sua jornada com a programação? Aqui estão alguns artigos que também podem interessar a você:

  • Um bootcamp de codificação é algo para você?
  • A mudança de carreira é realmente possível?
  • Por que Ruby é uma ótima linguagem para começar a programar