Destructuring, Spread e Rest: Guia Prático em JavaScript

Neste tutorial, exploraremos Destructuring, Spread e Rest Operators em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. Esses recursos foram introduzidos a partir do ECMAScript 2015 (ES6) e tornaram o código mais expressivo, conciso e poderoso. Vamos entender cada um deles passo a passo.

Destructuring🔗

Destructuring é uma forma de extrair dados de _arrays_ ou _objetos_ e atribuí-los a variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. de maneira mais direta e legível.

Destructuring de Arrays

Para ilustrar, suponha que temos um arrayFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. de frutas:

const frutas = ["Maçã", "Banana", "Laranja"];
// Modo tradicional
const fruta1 = frutas[0];
const fruta2 = frutas[1];
const fruta3 = frutas[2];
// Usando destructuring:
const [maca, banana, laranja] = frutas;
console.log(maca);    // "Maçã"
console.log(banana);  // "Banana"
console.log(laranja); // "Laranja"

Com o destructuring, definimos as variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. entre colchetes ([ ]) na ordem dos valores desejados.

Pulando Elementos

Para ignorar valores, podemos simplesmente inserir vírgulas extras:

const [primeira,, terceira] = [10, 20, 30];
console.log(primeira, terceira); // 10, 30

Valores Padrão

É possível definir valores padrão para caso o elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. não exista:

const [x = 5, y = 10] = [undefined, 20];
console.log(x, y); // 5, 20

Destructuring de Objetos

Com objetosFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web., a sintaxe é parecida, mas utilizamos chaves ({ }) ao invés de colchetes. A extração é feita com base no nome das propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters..

const pessoa = {
  nome: "Carlos",
  idade: 30,
  cidade: "São Paulo"
};
const { nome, idade, cidade } = pessoa;
console.log(nome);   // "Carlos"
console.log(idade);  // 30
console.log(cidade); // "São Paulo"

Renomeando Variáveis

É possível renomear variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. quando fazemos destructuring:

const { nome: primeiroNome } = pessoa;
console.log(primeiroNome); // "Carlos"

Valores Padrão em Objetos

Assim como nos arraysFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web., também podemos definir valores padrão:

const { profissao = "Não Informado" } = pessoa;
console.log(profissao); // "Não Informado"

Spread Operator🔗

O Spread Operator (...) permite expandir elementos de arrays ou propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. de objetos em outro contexto. Ele funciona como se estivéssemos “espalhando” os valores.

Spread em Arrays

Ele é muito útil, por exemplo, para clonar arraysFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. ou mesclá-los:

const numeros1 = [1, 2, 3];
const numeros2 = [4, 5, 6];
// Clonando:
const cloneNumeros = [...numeros1];
// Mesclando:
const todosNumeros = [...numeros1, ...numeros2];
console.log(cloneNumeros);   // [1, 2, 3]
console.log(todosNumeros);   // [1, 2, 3, 4, 5, 6]

Spread em Objetos

Também podemos “espalhar” as propriedadesClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. de um objeto dentro de outro:

const endereco = {
  rua: "Rua das Flores",
  numero: 123
};
const contato = {
  telefone: "9999-9999",
  email: "[email protected]"
};
// Clonando e unindo propriedades
const dadosCompletos = { ...endereco, ...contato };
console.log(dadosCompletos);
/*
{
  rua: "Rua das Flores",
  numero: 123,
  telefone: "9999-9999",
  email: "[email protected]"
}
*/

Neste caso, se houver chaves iguais em ambos os objetosFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web., a última sobrepõe a primeira.

Rest Operator🔗

O Rest Operator (...) é usado para agrupar vários valores em uma única estrutura. Enquanto o Spread “espalha” os valores, o Rest “agrupa”.

Uso em Parâmetros de Função

Em funçõesFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas., ele permite que lidemos com quantidades variáveisPré-processadores (SASS/SCSS): Variáveis, Mixins, NestingAprenda a manter seu CSS de forma otimizada com SASS/SCSS utilizando variáveis, mixins e nesting para um código limpo e produtivo. de argumentos:

function somar(...numeros) {
  return numeros.reduce((acumulador, valor) => acumulador + valor, 0);
}
console.log(somar(1, 2, 3, 4)); // 10
console.log(somar(5, 10));      // 15

Nesse exemplo, ...numeros capta todos os argumentos passados à função, transformando-os em um array. Isso torna a função mais flexível, pois não precisamos definir a quantidade exata de parâmetrosFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas..

Destructuring com Rest

Também podemos usar o Rest em destructuring para agrupar valores “restantes” do array ou do objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web.:

const [primeiro, ...resto] = [10, 20, 30, 40];
console.log(primeiro); // 10
console.log(resto);    // [20, 30, 40]

Em objetosFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web.:

const aluno = { nome: "Ana", idade: 25, curso: "JavaScript" };
const { nome, ...infoGerais } = aluno;
console.log(nome);       // "Ana"
console.log(infoGerais); // { idade: 25, curso: "JavaScript" }

Comparação: Spread vs. Rest🔗

Para evitar confusões, aqui vai uma tabelaCriando Tabelas: `<table>`, `<tr>`, `<td>`, `<th>`Descubra como montar tabelas HTML com tags básicas. Este tutorial prático ensina o uso de <table> <tr> <td> e <th> para organizar dados de forma eficiente. simples destacando as diferenças:

Operador	Sintaxe	Função Principal	Exemplo
Spread	`...`	“Espalhar” elementos de array ou objeto	`[...meuArray]`
Rest	`...`	“Agrupar” múltiplos valores em uma estrutura	`function f(...args) {}`