0Pricing
JavaScript Academy · Aula

Fundamentos da desestruturação de arrays e objetos

Desestruturação de arrays e objetos: fundamentos, como ignorar itens, valores padrão, renomeação e um truque simples para troca

Fundamentos da desestruturação de arrays e objetos é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 2. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 2 aulas no total.

Introdução

Objetivo: extraia valores de matrizes e objetos com clareza.

  • Desestruturação de matrizes
  • Ignorar posições e usar valores padrão
  • Desestruturação de objetos
  • Renomeação e truque de troca
Fundamentos da desestruturação de arrays e objetos — ilustração 1

Noções básicas de matrizes

Os padrões de matriz correspondem às posições. O primeiro elemento vai para a primeira variável, e assim por diante.

// Array destructuring: assign by position
const pair = [10, 20];

const [x, y] = pair;

console.log("x:", x);
console.log("y:", y);
Fundamentos da desestruturação de arrays e objetos — ilustração 2

Ignorar posições e usar valores padrão

Use vírgulas para ignorar posições. Adicione = default para itens undefined ou ausentes.

// Skip items with commas and provide defaults
const triple = [5, undefined, 9];

// Skip the middle, provide default for missing/undefined
const [first, , third = 0] = triple;

console.log("first:", first);
console.log("third with default:", third);
Fundamentos da desestruturação de arrays e objetos — ilustração 3

Truque de troca

Uma troca em uma única linha evita uma variável temporária.

// Swap values with destructuring
let a = "left";
let b = "right";

[a, b] = [b, a];

console.log("a:", a);
console.log("b:", b);
Fundamentos da desestruturação de arrays e objetos — ilustração 4

Noções básicas de objetos e renomeação

Os objetos correspondem pela key. Renomeie com key: localName e adicione = default quando necessário.

// Object destructuring: assign by property name
const user = { name: "Ayla", level: 2, active: true };

// Basic
const { name, active } = user;

// Renaming and default
const { level: userLevel = 0 } = user;

console.log("name:", name);
console.log("active:", active);
console.log("userLevel:", userLevel);
Fundamentos da desestruturação de arrays e objetos — ilustração 5

Campos aninhados (introdução)

Você pode ler campos aninhados em uma única etapa. Mantenha os padrões pequenos para facilitar a leitura em dispositivos móveis.

// Nested destructuring (keep it simple)
const config = {
  theme: { primary: "blue", contrast: "white" },
  flags: { compact: true }
};

const { theme: { primary }, flags: { compact } } = config;

console.log("primary:", primary);
console.log("compact:", compact);
Fundamentos da desestruturação de arrays e objetos — ilustração 6

Quiz sobre a sintaxe de troca

Verificação rápida: faça uma troca com desestruturação.

Fundamentos da desestruturação de arrays e objetos — ilustração 7

Recapitulação

Recapitulação: matrizes são desestruturadas por posição; objetos, por chave. Você ignorou itens, usou valores padrão, renomeou chaves e trocou valores em uma única linha.

Fundamentos da desestruturação de arrays e objetos — ilustração 8

Perguntas Frequentes

A aula “Fundamentos da desestruturação de arrays e objetos” é grátis?

Sim — o texto completo de “Fundamentos da desestruturação de arrays e objetos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 2 aulas no total.

O que vou aprender em “Fundamentos da desestruturação de arrays e objetos”?

Desestruturação de arrays e objetos: fundamentos, como ignorar itens, valores padrão, renomeação e um truque simples para troca Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 2.

Quanto tempo leva a aula “Fundamentos da desestruturação de arrays e objetos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Fundamentos da desestruturação de arrays e objetos
  2. Rest e spread — arrays e objetos idiomáticos
← Voltar para JavaScript Academy