Perguntas de entrevista para desenvolvedor frontend júnior: HTML, CSS e JavaScript

Introdução

Em uma entrevista para desenvolvedor frontend júnior, você precisa explicar como o HTML estrutura a página, como o CSS cria layouts responsivos e acessíveis e como o JavaScript lida com comportamento, dados e eventos do navegador. Este guia reúne 32 perguntas de prática com respostas claras, exemplos e notas de dificuldade para revisar fundamentos sem decorar respostas.

Use em duas passagens:

• Primeiro, responda cada pergunta em voz alta antes de ler a resposta.
• Depois, compare sua resposta com o exemplo e anote os temas que precisa reforçar.

Esta é a Parte 1 do nosso guia completo de entrevistas. Para perguntas sobre React, ferramentas de build, otimização de desempenho, depuração, acessibilidade, testes e habilidades interpessoais, confira a Parte 2: React, Ferramentas e Tópicos Avançados.

Fundamentos de HTML (7 Perguntas)

1. O que são elementos HTML semânticos e por que são importantes?

Resposta: Elementos HTML semânticos descrevem claramente seu significado e propósito tanto para navegadores quanto para desenvolvedores. Exemplos incluem <header>, <nav>, <main>, <article>, <section>, <aside> e <footer>. Eles são importantes porque melhoram a acessibilidade para leitores de tela e tecnologias assistivas, aprimoram o SEO, ajudando os mecanismos de busca a entender a estrutura do conteúdo, e tornam o código mais fácil de manter e legível. Ao contrário dos elementos genéricos <div> e <span>, que não fornecem contexto, os elementos semânticos comunicam o papel e o significado do conteúdo.

Raridade: Comum Dificuldade: Fácil

2. Explique a diferença entre elementos inline, block e inline-block

Resposta:

• Elementos block começam em uma nova linha e ocupam toda a largura disponível (por exemplo, <div>, <p>, <h1>). Você pode definir propriedades de largura e altura.
• Elementos inline permanecem na mesma linha e ocupam apenas a largura necessária (por exemplo, <span>, <a>, <strong>). Você não pode definir largura ou altura.
• Elementos inline-block permanecem inline, mas permitem que você defina largura e altura como elementos block. Isso combina o fluxo de inline com as capacidades de dimensionamento de block.

Raridade: Comum Dificuldade: Fácil

3. O que são elementos void (autofechados) em HTML?

Resposta: Elementos void são elementos HTML que não possuem tags de fechamento e não podem conter conteúdo. Exemplos comuns incluem: <img>, <br>, <hr>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed> e <source>. Esses elementos estão completos apenas com sua tag de abertura e atributos. Por exemplo, <img src="photo.jpg" alt="description"> não precisa de uma tag de fechamento </img>.

Raridade: Comum Dificuldade: Fácil

4. Como você torna um site acessível? Quais atributos HTML melhoram a acessibilidade?

Resposta: Para tornar sites acessíveis:

• Use elementos HTML semânticos (<nav>, <main>, <header>, <footer>)
• Forneça atributos alt para todas as imagens, descrevendo seu conteúdo
• Mantenha a hierarquia de títulos adequada (H1-H6) sem pular níveis
• Rotule os campos de formulário com elementos <label> usando o atributo for
• Garanta a acessibilidade do teclado com a ordem de tabulação adequada
• Use atributos ARIA quando o HTML semântico não for suficiente: aria-label, aria-describedby, aria-hidden, aria-live
• Adicione atributos role para widgets complexos
• Garanta contraste de cor suficiente (4.5:1 para texto normal)
• Torne os elementos interativos focalizáveis e forneça indicadores de foco visíveis

Raridade: Comum Dificuldade: Médio

5. Explique a diferença entre os métodos GET e POST em formulários

Resposta:

• GET: Anexa os dados do formulário à URL como parâmetros de consulta, tornando os dados visíveis no navegador. Possui limitações de comprimento (~2000 caracteres), pode ser armazenado em cache e adicionado aos favoritos, inseguro para dados confidenciais. Usado para recuperar dados onde a requisição não modifica o estado do servidor (buscas, filtros).
• POST: Envia os dados no corpo da requisição, não visível na URL. Sem restrições de comprimento, não pode ser armazenado em cache por padrão, mais seguro para informações confidenciais. Usado para enviar dados que modificam o estado do servidor (formulários de login, uploads de arquivos, criação de registros).

Exemplo: Formulários de busca normalmente usam GET para que os resultados possam ser adicionados aos favoritos, enquanto formulários de login usam POST para ocultar as credenciais.

Raridade: Comum Dificuldade: Fácil-Médio

6. Qual é o propósito da tag <meta>?

Resposta: A tag <meta> fornece metadados sobre o documento HTML que não são exibidos na página, mas são usados por navegadores, mecanismos de busca e outros serviços da web. Os usos comuns incluem:

• Codificação de caracteres: <meta charset="UTF-8">
• Configurações de viewport para design responsivo: <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Descrições de SEO: <meta name="description" content="Descrição da página">
• Informações do autor: <meta name="author" content="Nome">
• Palavras-chave (menos relevantes agora): <meta name="keywords" content="palavra-chave1, palavra-chave2">

Raridade: Comum Dificuldade: Fácil

7. Qual é a diferença entre <script>, <script async> e <script defer>?

Resposta:

• <script> regular: Bloqueia o parsing do HTML enquanto o script é baixado e executado. A renderização da página para até que o script seja concluído.
• <script async>: Baixa o script em paralelo com o parsing do HTML, mas executa imediatamente quando estiver pronto (potencialmente bloqueando o parsing). A ordem de execução não é garantida. Bom para scripts independentes como analytics.
• <script defer>: Baixa em paralelo, mas executa somente após a conclusão do parsing do HTML, mantendo a ordem dos scripts. Melhor para scripts que dependem do DOM ou de outros scripts.

Melhor prática: Coloque <script defer> no <head> para otimizar o desempenho, garantindo a ordem de execução adequada.

Raridade: Incomum Dificuldade: Médio

Fundamentos de CSS (10 Perguntas)

8. Explique o Box Model do CSS

Resposta: O Box Model do CSS descreve como os elementos são renderizados com quatro componentes (de dentro para fora):

1. Content (Conteúdo): O conteúdo real (texto, imagens)
2. Padding: Espaço entre o conteúdo e a borda (interno)
3. Border (Borda): A borda que envolve o padding
4. Margin (Margem): Espaço fora da borda (entre os elementos)

A propriedade box-sizing afeta os cálculos:

• box-sizing: content-box (padrão): Largura/altura se aplicam apenas ao conteúdo; padding e border são adicionados
• box-sizing: border-box: Largura/altura incluem conteúdo + padding + border (mais intuitivo)

Exemplo: Com box-sizing: border-box, um elemento com width: 100px; padding: 10px; border: 2px; permanece exatamente com 100px de largura.

Raridade: Comum Dificuldade: Fácil-Médio

9. Explique a especificidade do CSS e como ela funciona

Resposta: A especificidade do CSS determina quais estilos são aplicados quando várias regras têm como alvo o mesmo elemento. A especificidade é calculada contando os seletores:

• Estilos inline: 1000 pontos
• IDs: 100 pontos cada
• Classes, atributos, pseudo-classes: 10 pontos cada
• Elementos, pseudo-elementos: 1 ponto cada

Exemplos:

• #nav .button = 110 (1 ID + 1 classe)
• .header .nav a = 21 (2 classes + 1 elemento)
• div p = 2 (2 elementos)

Quando a especificidade é igual, a última regra vence (cascata). !important sobrescreve tudo, mas deve ser evitado. Melhor prática: Use classes para estilizar, evite IDs e !important.

Raridade: Comum Dificuldade: Médio

10. O que é Flexbox e quando você o usaria?

Resposta: Flexbox é um sistema de layout unidimensional para organizar itens ao longo de um único eixo (linha ou coluna).

Propriedades do pai (flex container):

• display: flex - habilita o flexbox
• flex-direction - row, column, row-reverse, column-reverse
• justify-content - alinhamento ao longo do eixo principal (center, space-between, space-around)
• align-items - alinhamento ao longo do eixo transversal (center, flex-start, flex-end, stretch)
• flex-wrap - controla o quebramento (nowrap, wrap)

Propriedades do filho (flex item):

• flex-grow - quanto o item cresce em relação aos outros
• flex-shrink - quanto o item encolhe
• flex-basis - tamanho inicial antes de crescer/encolher
• align-self - sobrescreve align-items para um item individual

Use Flexbox para: Barras de navegação, layouts de cards, centralizar elementos, distribuir espaço uniformemente, alinhar itens dentro de contêineres.

Raridade: Comum Dificuldade: Médio

11. O que é CSS Grid e como ele difere do Flexbox?

Resposta: CSS Grid é um sistema de layout bidimensional para criar layouts complexos com linhas E colunas simultaneamente.

Principais diferenças:

• Grid: Bidimensional (linhas + colunas), melhor para layouts de página
• Flexbox: Unidimensional (eixo único), melhor para componentes

Propriedades do Grid:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 colunas */
  grid-template-rows: 100px auto 50px;
  grid-gap: 20px; /* ou gap */
}

Quando usar:

• Grid: Layouts gerais de página, designs estilo revista, estruturas de grade complexas
• Flexbox: Barras de navegação, cards, componentes dentro de células do grid
• Ambos juntos: Grid para layout macro, Flexbox para layouts micro

Raridade: Comum Dificuldade: Médio

12. Como você centraliza uma div horizontalmente e verticalmente?

Resposta:

Abordagens modernas (preferidas):

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

Abordagens legadas:

/* Posicionamento absoluto */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Margem automática (apenas horizontal, requer largura) */
.child {
  margin: 0 auto;
  width: 300px;
}

Flexbox e Grid são agora as soluções padrão, pois são mais limpas e flexíveis.

Raridade: Comum Dificuldade: Fácil-Médio

13. Explique o posicionamento CSS: static, relative, absolute, fixed e sticky

Resposta:

• Static (padrão): Fluxo normal do documento, sem posicionamento especial
• Relative: Posicionado em relação à sua posição normal usando top/right/bottom/left. O espaço original no fluxo do documento é preservado. Frequentemente usado como contexto de posicionamento para filhos absolutos.
• Absolute: Removido do fluxo, posicionado em relação ao ancestral posicionado mais próximo (ou viewport se nenhum). Não afeta outros elementos.
• Fixed: Removido do fluxo, posicionado em relação ao viewport. Permanece no lugar durante a rolagem.
• Sticky: Híbrido de relative e fixed. Atua como relative até o limite de rolagem, então se torna fixed. Útil para cabeçalhos fixos que começam no fluxo.

Exemplo: Navegação que se torna fixa após a rolagem usa position: sticky; top: 0;

Raridade: Comum Dificuldade: Médio

14. Qual é a diferença entre display: none, visibility: hidden e opacity: 0?

Resposta:

• display: none: Elemento completamente removido do fluxo do documento, não ocupa espaço, não acessível a leitores de tela, sem eventos de ponteiro
• visibility: hidden: Elemento invisível, mas mantém o espaço no layout, ainda no DOM, não acessível a leitores de tela, sem eventos de ponteiro
• opacity: 0: Elemento invisível, mas mantém o espaço, ainda no DOM, AINDA acessível a leitores de tela, AINDA recebe eventos de ponteiro

Casos de uso:

• display: none - alternar a visibilidade (modais, dropdowns)
• visibility: hidden - manter o layout enquanto esconde
• opacity: 0 - animações de fade, manter o elemento interativo

Raridade: Comum Dificuldade: Fácil-Médio

15. O que são pseudo-classes e pseudo-elementos CSS? Forneça exemplos.

Resposta:

Pseudo-classes (dois pontos simples) - Selecionam elementos com base no estado ou posição:

a:hover { color: blue; }          /* mouse sobre */
input:focus { border: 2px solid blue; }  /* foco do teclado */
li:nth-child(odd) { background: #eee; }  /* itens de lista ímpares */
button:disabled { opacity: 0.5; }  /* estado desabilitado */

Outros exemplos: :active, :checked, :first-child, :last-child, :nth-of-type()

Pseudo-elementos (dois pontos duplos) - Estilizam partes específicas ou inserem conteúdo:

p::first-line { font-weight: bold; }  /* primeira linha do parágrafo */
p::first-letter { font-size: 2em; }   /* capitular */
.icon::before { content: "→"; }        /* inserir conteúdo */
input::placeholder { color: gray; }    /* texto do placeholder */

Pseudo-elementos são ótimos para elementos decorativos sem adicionar HTML.

Raridade: Comum Dificuldade: Médio

16. Como você cria layouts responsivos? Explique media queries.

Resposta: Layouts responsivos se adaptam a diferentes tamanhos de tela usando:

Media Queries:

/* Abordagem mobile first (recomendada) */
.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container { width: 750px; }  /* Tablet */
}

@media screen and (min-width: 1024px) {
  .container { width: 960px; }  /* Desktop */
}

Breakpoints comuns:

• 320px: Mobile pequeno
• 768px: Tablet
• 1024px: Desktop
• 1440px: Desktop grande

Outras técnicas responsivas:

• Layouts fluidos (porcentagens, unidades vw/vh)
• Flexbox e Grid flexíveis
• Imagens responsivas (max-width: 100%, atributo srcset)
• Queries min-width (mobile-first) vs max-width (desktop-first)

Raridade: Comum Dificuldade: Médio

17. O que é z-index e como ele funciona?

Resposta: z-index controla a ordem de empilhamento de elementos posicionados (relative, absolute, fixed, sticky) ao longo do eixo z (frente para trás).

Pontos chave:

• Funciona apenas em elementos posicionados (não static)
• Valores mais altos aparecem na frente
• Pode usar valores negativos
• O valor padrão é auto (efetivamente 0)
• Cria um "contexto de empilhamento" que afeta como os filhos se empilham

Armadilha comum:

.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; }

O filho com z-index 9999 não pode aparecer acima de outro elemento com z-index 2 que está fora do contexto de empilhamento do pai.

Raridade: Comum Dificuldade: Médio

Fundamentos de JavaScript (15 Perguntas)

18. Explique a diferença entre var, let e const

Resposta:

• var: Escopo de função, içada (hoisted) e inicializada com undefined, pode ser redeclarada, amplamente depreciada no código moderno
• let: Escopo de bloco, içada, mas na Temporal Dead Zone (TDZ) até a declaração, não pode ser redeclarada no mesmo escopo
• const: Escopo de bloco, içada, mas na TDZ, deve ser inicializada na declaração, não pode ser reatribuída (mas o conteúdo de objetos/arrays pode ser mutado)

Melhores práticas:

• Use const por padrão
• Use let quando precisar reatribuir
• Nunca use var no JavaScript moderno

Exemplo:

const name = "Alice";     // Não pode reatribuir
let count = 0;            // Pode reatribuir
count = 1;                // OK
name = "Bob";             // Erro!

const user = { age: 25 };
user.age = 26;            // OK - mutando a propriedade do objeto
user = {};                // Erro - reatribuindo

Raridade: Comum Dificuldade: Fácil

19. O que são closures e forneça um exemplo prático?

Resposta: Uma closure ocorre quando uma função interna tem acesso às variáveis do escopo de sua função externa (envolvente), mesmo depois que a função externa retornou. A função interna "fecha sobre" essas variáveis.

Exemplo:

function createCounter() {
  let count = 0;  // Variável privada
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

A função interna mantém o acesso a count mesmo que createCounter tenha terminado de ser executada. Isso permite a privacidade de dados - count não pode ser acessado diretamente de fora.

Casos de uso: Privacidade de dados, fábricas de funções, callbacks, padrões de módulo, manipuladores de eventos

Raridade: Comum Dificuldade: Médio

20. Explique == vs === em JavaScript

Resposta:

• == (igualdade solta): Realiza coerção de tipo antes da comparação, converte os tipos para corresponder
• === (igualdade estrita): Verifica tanto o valor QUANTO o tipo, sem coerção de tipo

Exemplos:

5 == '5'       // true (string coagida para número)
5 === '5'      // false (tipos diferentes)

null == undefined   // true (caso especial)
null === undefined  // false (tipos diferentes)

0 == false     // true (ambos coagidos)
0 === false    // false (número vs booleano)

Melhor prática: Sempre use === e !== para evitar bugs inesperados da coerção de tipo.

Raridade: Comum Dificuldade: Fácil

21. O que é hoisting em JavaScript?

Resposta: Hoisting é o comportamento do JavaScript de mover declarações de variáveis e funções para o topo de seu escopo durante a fase de compilação, antes da execução do código.

Diferentes comportamentos de hoisting:

console.log(x);  // undefined (içada, inicializada)
var x = 5;

console.log(y);  // ReferenceError (içada, mas na TDZ)
let y = 5;

sayHello();      // "Olá!" (função totalmente içada)
function sayHello() {
  console.log("Olá!");
}

sayHi();         // TypeError (não é uma função)
var sayHi = function() {
  console.log("Oi!");
};

Pontos chave:

• Declarações var são içadas e inicializadas com undefined
• let/const são içadas, mas permanecem não inicializadas (Temporal Dead Zone)
• Declarações de função são totalmente içadas (incluindo a implementação)
• Expressões de função não são totalmente içadas

Raridade: Comum Dificuldade: Médio

22. Explique a palavra-chave this e como ela difere nas arrow functions

Resposta: this se refere ao contexto em que uma função é executada. Seu valor depende de COMO a função é chamada.

Funções regulares:

const obj = {
  name: "João",
  greet: function() {
    console.log(this.name);  // "João"
  }
};
obj.greet();  // this = obj

const greet = obj.greet;
greet();  // this = undefined (modo estrito) ou window

Arrow functions:

const obj = {
  name: "João",
  greet: () => {
    console.log(this.name);  // undefined
  }
};
obj.greet();  // this = escopo léxico (contexto envolvente)

Principais diferenças:

• Funções regulares: this determinado pelo local da chamada
• Arrow functions: this herdado lexicamente do escopo envolvente
• Arrow functions não têm seu próprio this, arguments ou super

Caso de uso: Arrow functions são ótimas para callbacks onde você quer preservar o this externo:

class Timer {
  start() {
    setTimeout(() => {
      console.log(this);  // Instância de Timer (léxico)
    }, 1000);
  }
}

Raridade: Comum Dificuldade: Médio-Difícil

23. O que são template literals e seus benefícios?

Resposta: Template literals são literais de string usando crases (`) que suportam interpolação de string e strings multi-linha.

Recursos:

const name = "Alice";
const age = 25;

// Interpolação de string
const message = `Olá, meu nome é ${name} e eu tenho ${age} anos.`;

// Strings multi-linha
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// Avaliação de expressão
const price = `Total: $${(quantity * unitPrice).toFixed(2)}`;

Benefícios:

• Sintaxe mais limpa do que a concatenação de strings
• Não há necessidade de \n para quebras de linha
• Pode incorporar qualquer expressão JavaScript com ${}
• Melhor para geração de HTML/CSS

Raridade: Comum Dificuldade: Fácil

24. Explique Promises e seus três estados

Resposta: Uma Promise representa a eventual conclusão (ou falha) de uma operação assíncrona e seu valor resultante.

Três estados:

1. Pending (Pendente): Estado inicial, operação não concluída
2. Fulfilled (Cumprida): Operação concluída com sucesso
3. Rejected (Rejeitada): Operação falhou

Exemplo:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve({ data: "Informações do usuário" });
    } else {
      reject(new Error("Falha ao buscar"));
    }
  }, 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Feito"));

Benefícios sobre callbacks:

• Evita o callback hell
• Encadeável com .then()
• Melhor tratamento de erros com .catch()
• Pode usar Promise.all() para operações paralelas

Raridade: Comum Dificuldade: Médio

25. O que é async/await e como ele melhora a legibilidade do código?

Resposta: async/await é um açúcar sintático construído sobre Promises que faz com que o código assíncrono pareça e se comporte mais como código síncrono.

Exemplo:

// Com Promises (mais difícil de ler)
function fetchUserData() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => {
      return fetch(`/api/posts/${data.id}`);
    })
    .then(response => response.json())
    .catch(error => console.error(error));
}

// Com async/await (mais limpo)
async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    
    const postsResponse = await fetch(`/api/posts/${user.id}`);
    const posts = await postsResponse.json();
    
    return posts;
  } catch (error) {
    console.error(error);
  }
}

Pontos chave:

• A função async sempre retorna uma Promise
• await pausa a execução até que a Promise seja resolvida
• Use try/catch para tratamento de erros
• Torna as operações sequenciais mais claras
• Tratamento de erros mais natural do que .catch()

Raridade: Comum Dificuldade: Médio

26. Explique o Event Loop e como o JavaScript lida com operações assíncronas

Resposta: JavaScript é single-threaded, mas lida com operações assíncronas através do mecanismo do Event Loop.

Componentes:

1. Call Stack (Pilha de Chamadas): Executa código síncrono (LIFO)
2. Web APIs: Lidam com operações assíncronas (setTimeout, fetch, eventos DOM)
3. Callback Queue (Fila de Tarefas): Contém callbacks das Web APIs
4. Microtask Queue (Fila de Microtarefas): Contém callbacks de Promises (maior prioridade)
5. Event Loop: Move tarefas das filas para a pilha de chamadas quando a pilha está vazia

Ordem de execução:

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Saída: 1, 4, 3, 2
// Explicação:
// - Código síncrono (1, 4) executa primeiro
// - Microtarefas (Promise) executam antes das macrotarefas
// - Macrotarefas (setTimeout) executam por último

Ordem de execução: Call Stack → Microtask Queue → Callback Queue (Macrotasks)

Raridade: Comum Dificuldade: Difícil

27. Como você seleciona e manipula elementos DOM?

Resposta:

Métodos de seleção:

// Moderno (preferido)
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');
const firstItem = document.querySelector('.list-item');

// Legado (ainda válido)
const elem = document.getElementById('myId');
const elems = document.getElementsByClassName('myClass');
const tags = document.getElementsByTagName('div');

Manipulação:

// Conteúdo
element.textContent = 'Novo texto';
element.innerHTML = '<span>Conteúdo HTML</span>';

// Estilização
element.style.color = 'blue';
element.style.backgroundColor = '#eee';

// Classes
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('active');

// Atributos
element.setAttribute('data-id', '123');
element.getAttribute('data-id');

// Criando elementos
const newDiv = document.createElement('div');
newDiv.textContent = 'Olá';
document.body.appendChild(newDiv);

Raridade: Comum Dificuldade: Fácil

28. Explique a delegação de eventos e por que ela é útil

Resposta: Delegação de eventos é anexar um único listener de evento a um elemento pai em vez de vários listeners a elementos filhos, aproveitando o bubbling de eventos.

Sem delegação (ineficiente):

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

Com delegação (eficiente):

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

Benefícios:

• Melhor desempenho: Listener único vs muitos
• Funciona com elementos dinâmicos: Lida automaticamente com itens adicionados posteriormente
• Menor uso de memória: Menos listeners de evento
• Código mais limpo: Tratamento de eventos centralizado

Caso de uso: Listas onde os itens podem ser adicionados/removidos dinamicamente (listas de tarefas, carrinhos de compras, seções de comentários)

Raridade: Comum Dificuldade: Médio

29. O que é event bubbling? Como você interrompe a propagação?

Resposta: Event bubbling é quando um evento acionado em um elemento filho "sobe" através de seus ancestrais até a raiz do documento.

Três fases:

1. Fase de Captura: O evento viaja de cima para baixo, da janela para o alvo
2. Fase de Alvo: O evento atinge o elemento alvo
3. Fase de Bubbling: O evento sobe do alvo para a janela (padrão)

Exemplo:

<div id="parent">
  <button id="child">Clique em mim</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', () => {
  console.log('Pai clicado');
});

document.getElementById('child').addEventListener('click', (e) => {
  console.log('Filho clicado');
  // O evento sobe para o pai
});
// Clicar no botão registra: "Filho clicado", depois "Pai clicado"
</script>

Interrompendo a propagação:

element.addEventListener('click', (e) => {
  e.stopPropagation();  // Interrompe o bubbling
  e.preventDefault();    // Impede o comportamento padrão (envio de formulário, navegação de link)
});

Raridade: Comum Dificuldade: Médio

30. Explique destructuring para objetos e arrays

Resposta: Destructuring extrai valores de arrays ou propriedades de objetos em variáveis distintas.

Destructuring de array:

const colors = ['red', 'green', 'blue', 'yellow'];

const [first, second, ...rest] = colors;
// first = 'red'
// second = 'green'
// rest = ['blue', 'yellow']

// Pular elementos
const [primary, , tertiary] = colors;
// primary = 'red', tertiary = 'blue'

Destructuring de objeto:

const user = {
  name: 'Alice',
  age: 25,
  email: '[email protected]'
};

const { name, age, city = 'NYC' } = user;
// name = 'Alice'
// age = 25
// city = 'NYC' (valor padrão)

// Renomear variáveis
const { name: userName, age: userAge } = user;

// Destructuring aninhado
const { address: { street, zip } } = person;

Parâmetros de função:

function greet({ name, age = 18 }) {
  console.log(`Olá ${name}, idade ${age}`);
}

greet({ name: 'Bob', age: 25 });

Raridade: Comum Dificuldade: Fácil-Médio

31. Explique o spread operator e rest parameters

Resposta:

Spread operator (...) - Expande iteráveis:

// Arrays
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];  // [1, 2, 3, 4, 5]
const combined = [...arr1, ...arr2];

// Objetos (cópia superficial)
const user = { name: 'Alice', age: 25 };
const updatedUser = { ...user, age: 26 };  // Atualização imutável

// Argumentos de função
const numbers = [1, 2, 3];
Math.max(...numbers);  // 3

Rest parameters (...) - Coleta múltiplos elementos:

// Parâmetros de função
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4);  //