Forem: Barbara Robles 🇧🇷

Operadores Spread vs Rest em JavaScript

Barbara Robles 🇧🇷 — Tue, 12 Mar 2024 12:33:57 +0000

Conteúdo:

Definição
Operador Spread
- Concatenando Arrays
- Unindo Objetos
- Copiando Arrays e Objetos
- Transformando Strings em Arrays
Operador Rest
- Parâmetros de Função
Desestruturação com Rest e Spread

Vem aprender a usar os três pontinhos no seu código. Depois desse artigo você não vai mais esquecer a diferença entre eles! 🐱🐱🐱

Definição :

O spread é o operador quer nos permite expandir iteráveis em elementos individuais.
O rest é o operador que usamos para representar um número indefinido de argumentos em um array.

Ambos são escritos utilizando os três pontos ..., mas você verá que é fácil identificar quando é um spread e quando é um rest! No final tem também uma dica boa para você!

Operador Spread

Concatenando Arrays

O spread permite que unamos dois ou mais arrays, mantendo uma linguagem concisa e limpa.

Vamos tomar um café? ☕️ Considere os dois arrays abaixo:

const coffee = ['café', 'água'];
const spices = ['canela', 'noz-moscada', 'cardamomo'];

Para temperar o café, precisamos misturar os arrays coffee e spices. Podemos usar o spread para juntá-los em um único array:

const coffeeReady = [...coffee, ...spices];

console.log(coffeeReady) 
// output:
// ['café', 'água', 'canela', 'noz-moscada', 'cardamomo'];

Simples, não? Muito melhor do que escrever item por item de cada um dos dois arrays para formar coffeeReady.

Importante:

1. Alterações em coffee não afetarão coffeeReady!

Para entender melhor: quando fazemos uma cópia, podemos criar uma nova referência ao valor original ou apenas copiar o valor. Criar uma nova referência nada mais é do que criar uma variável que apontará para o local na memória em que está o valor original.

Caso tivéssemos criado uma nova referência, qualquer alteração em coffee alteraria coffeeReady e vice-e-versa, pois ambos apontariam para o dado armazenado no mesmo local. Mas o que fizemos com o spread foi copiar apenas o valor, que por sua vez ficará armazenado em outro local da memória. Assim, alterações em um array não afetarão o outro.

No entanto, alguns detalhes poderiam mudar esse quadro! Isso porque...

2. O spread apenas cria uma cópia superficial (shallow copy)!

Isso significa que, dependendo dos dados contidos em coffee, algumas alterações poderiam sim alterar coffeeReady! Se coffee contivesse algum valor não-primitivo, o computador teria criado uma referência para os valores na memória. Assim, qualquer alteração em um array, afetaria o outro, em relação aos dados não-primitivos, já que ambos estariam armazenando uma referência para o mesmo local da memória. Veja abaixo:

let a = [1, [2, 3]];
const b = [4, 5, 6];
// [2, 3] é um array aninhado em a, e portanto
// é um valor não-primitivo

let c = [...a, ...b];
console.log(c);
// output: [1, [2, 3], 4, 5, 6]

a[0] = 11;
a[1][0] = 22;

console.log(c);
// output: [1, [22, 3], 4, 5, 6]

Veja acima que alterar a[0] não afetou c, pois alteramos um valor primitivo, ou seja a[0] e c apontam para valores iguais, mas que estão em locais diferentes na memória. No entanto, alterar a[1][0], modificou c, porque alteramos um array, que é um valor não-primtivo. Assim, alteramos um valor contido no espaço de memória, para o qual tanto a[1][0] quanto c apontam.

Unindo Objetos

Também podemos unir objetos em um só usando o spread:

const myParents = { 
  fathersName: 'Michael', 
  mothersName: 'Louise'
};
const mySiblings = { 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
};

const myFamily = { ...myParents, ...mySiblings };
console.log(myFamily);
/* output:
{ 
  fathersName: 'Michael', 
  mothersName: 'Louise', 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
} 
*/

No entanto, é importante lembrar que o spread não clona propriedades idênticas! Abaixo temos dois objetos com brothersName:

const myParents = { 
  fathersName: 'Michael', 
  mothersName: 'Louise',
  brothersName: 'Gabriel'
};
const mySiblings = { 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
};

const myFamily = { ...myParents, ...mySiblings };
console.log(myFamily);
// output:
/* { 
  fathersName: 'Michael', 
  mothersName: 'Louise', 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
}

Veja que o objeto final não herda as duas chaves brothersName. Na verdade, apenas uma prevalece, que é a do segundo objeto.

Copiando Arrays e Objetos

Pegou a ideia até agora? Se podemos unir arrays e também objetos, isso significa também que podemos copiá-los individualmente:

// criando uma cópia superficial de coffee:
const coffee = ['café', 'água'];
const coffeeCopy = [...coffee];
console.log(coffeeCopy)
// output: 
// ['café', 'água'];

// criando uma cópia superficial de mySiblings:
const mySiblings = { 
  brothersName: 'Philip', 
  sistersName: 'Lara' 
};

const myFamily = { 
  fathersName: 'Michael', 
  mothersName: 'Louise',
  ...mySiblings
};
// e agora podemos tratar brothersName e sistersName como
// uma propriedade de myFamily:
console.log(myFamily.brothersName) 
// output: Philip

Transformando Strings em Arrays

É também possível usar o spread para transformar uma string em um array. Isso nos permite ter mais flexibilidade ao manipular strings, pois dessa maneira conseguimos aplicar métodos de arrays em strings:

const str = 'coffee';
const letters = [...str, 's.', '☕️']; 
console.log(letters);// ["c", "o", "f", "f", "e", "e", "s.", ☕️"]

Operador Rest

Conforme dito acima, o operador rest é usado para empacotar elementos em um array. Você verá que o rest é um grande aliado para quando lidamos com muitos valores ou número de valores incertos.

Parâmetros de Função

O operador rest permite representar um número indefinido de argumentos como um array.

const order = function(beverage, ...otherIngredients) {
  console.log(beverage);
  console.log(otherIngredients);
};

order('chá verde', 'leite', 'açúcar mascavo'); 
// output:
// chá verde 
// ['leite', 'açúcar mascavo']

Veja que isso nos permite chamar a mesma função com mais argumentos, pois o rest os colocará todos no array otherIngredients:

const order = function(beverage, ...otherIngredients) {
  console.log(beverage);
  console.log(otherIngredients);
};

order('chá verde', 'leite', 'açúcar mascavo', 'hortelã', 'cumaru'); 
// output:
// chá verde 
// ['leite', 'açúcar mascavo', 'hortelã', 'cumaru']

🍵 Um detalhe importante é que o rest deve ser o último parâmetro na função! Se escrevêssemos function(...otherIngredients, beverage) o computador não saberia quando parar e isso geraria um erro.

Desestruturação com Rest e Spread

O rest e o spread também são muito utilizados em desestruturação. Se você não sabe ainda o que é isso, sugiro meus outros dois artigos aqui: desestruturação de arrays e desestruturação de objetos.

Usando rest:

const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(a, b, others); 
// output: 1 2 [3, 4, 5]

Usando spread:

const array = [1, 2, ...[3, 4, 5]];
console.log(array); 
// output: [1, 2, 3, 4, 5]

Agora, pega essa dica para você não confundir rest com o spread aqui: o rest fica do lado esquerdo de = e o spread fica do lado direito de =.

...rest = ☕️

🍵 = ...spread

Obrigada por chegar até aqui! Espero que esse post tenha te ajudado! Comenta o que achou!

Desestruturando Objetos em JavaScript - Object Destructuring

Barbara Robles 🇧🇷 — Tue, 27 Feb 2024 14:14:35 +0000

Na semana passada falamos de desestruturação de arrays aqui. Agora vamos entender de uma vez por todas desestruturação de objetos!

Conteúdo:

Sintaxe Básica
Renomeando Propriedades
Valores Padrão
Renomeando Variáveis e Valores Padrão
Objetos Aninhados
Alterando Variáveis

Sintaxe Básica

Desestruturação é uma maneira simples de extrair dados de arrays ou objetos em variáveis separadas. Vamos dar uma olhada em como funciona a desestruturação de objetos.

Tomemos este objeto como exemplo:

const user = {
  userName: 'Ada',
  age: 28,
  city: 'São Paulo'
};

Agora vamos extrair os dados de city e age usando a desestruturação:

const { city, age } = user;

Aqui, criamos duas variáveis chamadas city e age. A elas serão atribuídos os valores das propriedades de mesmo nome do objeto user.

Isso representa uma grande vantagem, pois agora podemos trabalhar isoladamente com essas informações:

console.log(city); // output: 'São Paulo'
console.log(age); // output: 28

Alguns detalhes importantes devem ser anotados:

Observe que a propriedade userName foi omitida na desestruturação. Diferentemente da desestruturação de arrays, não é necessário pular manualmente as propriedades;
A ordem das variáveis listadas na desestruturação não importa. Veja que coloquei city antes de age, o que não resultará em erro. Isso porque em objetos, as propriedades não seguem uma ordem fixa;
Os nomes das variáveis podem ser alterados! Veja abaixo:

Renomeando Propriedades

Podemos facilmente alterar o nome das propriedades extraídas do objeto ao mesmo tempo em que fazemos a atribuição por desestruturação. Essa recurso é bastante útil para quando queremos evitar conflitos entre nomes:

const { city: c, age: a } = user;

console.log(c); // output: 'São Paulo'
console.log(a); // output: 28

Valores Padrão

É possível que algum dos valores extraídos seja undefined, o que pode ser uma fonte de bugs no seu código. Podemos evitar isso de uma maneira muito simples!

Ainda usado o objeto user acima, suponhamos que queremos extrair uma propriedade nationality, que não foi definida. Para evitar que a variável fique com o valor de undefined, vamos atribuir a ela um valor padrão, desta forma:

const { city, age, nationality = 'brasileira' } = user;

Renomeando Variáveis e Valores Padrão

Além disso, é possível juntar as sintaxes acima, combinando os processos de renomear variáveis com o de definir valores padrões:

const { 
  city: c = 'Brasília',
  age: a = 18,
  nationality: n = 'brasileira'
} = user;

E no caso do objeto user, a saída agora será esta:

console.log(c); // output: 'São Paulo'
console.log(a); // output: 28 
console.log(n); // output: 'brasileira'

Perceba que o valor padrão somente será aplicado apenas para n, já que os outros valores foram definidos previamente.

Objetos Aninhados

Se o objeto em questão contiver outro objeto dentro dele, também é possível fazer desestruturação do objeto aninhado. Vamos acrescentar no objeto user as notas das disciplinas:

const user = {
  userName: 'Ada',
  age: 28,
  city: 'São Paulo',
  grades: {
    math: 9.5,
    portuguese: 9.2,
    chemistry: 10,
    history: 7.5,
    geography: 7.8,
  }
};

Para trabalhar isoladamente com as notas, podemos fazer a desestruturação desta maneira:

const {
  grades: {
    math, 
    portuguese, 
    chemistry, 
    history, 
    geography 
  } 
} = user;

E assim, os valores poderão ser acessados separadamente:

console.log(math) // output: 9.5
console.log(portuguese) // output: 9.2
console.log(chemistry) // output: 10
console.log(history) // output: 7.5
console.log(geography) // output: 7.8

Alterando Variáveis

Agora vamos para a situação onde as variáveis já foram declaradas e inicializadas, como a e b abaixo:

let a = 55;
let b = 77

const object = {
  a: 41,
  b: 27,
  c: 14
};

Como podemos atribuir a a e b os valores contidos no objeto? Não podemos escrever let {a, b} = object nem const {a, b} = object, uma vez que estaríamos declarando as variáveis novamente. Mas também não podemos escrever {a, b} = object, pois o JavaScript entende que toda linha começando com chaves {} é um bloco de código e isso vai gerar um erro de sintaxe no código.

A solução está em envolver o código usando parênteses:

({a, b} = object);

console.log(a); // output: 41
console.log(b); // output: 27

Assim, o JavaScript entenderá que se trata de uma desestruturação e não um bloco de código.

Obrigada por ter chegado até aqui! =)
Dúvidas, comentários, sugestões? Comenta aqui embaixo!

Desestruturação de Arrays em JavaScript

Barbara Robles 🇧🇷 — Thu, 22 Feb 2024 16:34:38 +0000

Tem dúvidas de como funciona a desestruturação de arrays? Então vem comigo!

Conteúdo:

Sintaxe Básica
Pulando Valores
Trocando Valores
Arrays Aninhados
Valores Padrão

Sintaxe Básica

Desestruturação é uma maneira simples de extrair dados de arrays ou objetos em variáveis separadas. Vamos dar uma olhada em como funciona a desestruturação de arrays.

Tomemos o array abaixo como exemplo:

const numbers = [41, 27, 55];

Se fôssemos extrair esses dados de maneira manual, faríamos:

const a = numbers[0]; 
const b = numbers[1];
const c = numbers[2];

Legal... mas bastante repetitivo também, né?

Graças aos deuses da programação, em 2015, o ES6 trouxe a desestruturação e agora podemos extrair esses dados de uma maneira bem mais concisa e simples. Esta é a sintaxe básica da desestruturação:

const [ a, b, c ] = numbers;

Aqui, fizemos a mesma coisa que o código acima: declaramos três variáveis, e atribuímos a elas os valores do array numbers.

Agora, podemos trabalhar com os valores do array separadamente:

console.log(a); // output: 41
console.log(b); // output: 27
console.log(c); // output: 55

Mas e se não quisermos extrair todos os dados do array? Segue abaixo!

Pulando Valores

O motivo pelo qual precisamos pular valores na desestruturação de arrays é que, diferentemente dos objetos, os arrays seguem uma ordem. Assim, toda vez que não quisermos extrair um valor de um array, temos que sinalizar isso ao programa. Fazemos isso omitindo a variável que estaria lá (mas deixando as vírgulas e espaços), ou seja, isto , b, se transforma nisto , ,.

Usando o exemplo acima, se não quisermos extrair o valor 27 do array, faremos:

const [ a, , c ] = numbers;

Et voilà!

Trocando Valores

A desestruturação nos permite trocar os valores entre variáveis sem ter que criar uma variável temporária. Veja o antes e depois da troca dos valores entre a e c:

console.log(a, c); //  output: 41 55

[a, c] = [c, a];

console.log(a, c); //  output: 55 41

Quer coisa mais simples que isso? Agora você tem uma opção menos custosa em termos de desempenho para fazer a troca de valores entre variáveis!

Arrays Aninhados

Mas e se tivermos um array dentro de um array? Também é possível fazermos a desestruturação:

const nested = [47, 5, [2, 1]];

const [k, , array] = nested;

Com isso teremos:

console.log(k); // output: 47
console.log(array); // output: [2, 1]

Também podemos fazer uma desestruturação dentro da desestruturação. Considerando o mesmo array acima:

const [m, , [n, o]] = nested;

console.log(m); // output: 47
console.log(n); // output: 2
console.log(o); // output: 1

Além disso, pode a desestruturação criar mais variáveis do que o número de elementos dentro do array? Sim! Segue comigo!

Valores Padrão

É possível criar mais variáveis do que elementos existentes no array. No entanto, a princípio, eles terão o valor de undefined:

const [a, b, c] = [2, 3]

console.log(a, b, c); // output: 2 3 undefined

O que fazer para evitar isso? Junto com a desestruturação, podemos estabelecer valores padrão! Veja:

const [a = 1, b = 1, c = 1] = [2, 3]

console.log(a, b, c); // output: 2 3 1

Assim, evitamos bugs no nosso código em razão do undefined. Além disso, estabelecer valores padrão torna o nosso código mais robusto e confiável.

E é isso por hoje! Obrigada por chegar até aqui! =)

Comenta aqui embaixo o que achou para que eu me aprimore!