Por que JavaScript é tão importante nas entrevistas?

📽️

Veja o vídeo:

Os conceitos que você precisa dominar

Hoisting

console.log(nome); // undefined, devido ao hoisting da declaração, mas não da inicialização
var nome = "Rocketseat";

saudacao(); // Chamada da função antes da sua declaração, funciona devido ao hoisting
function saudacao() {
  console.log("Olá!");
}

console.log(nome); // ReferenceError: Cannot access 'nome' before initialization
let nome = "Rocketseat";

Dica de entrevista: explique como evitar problemas relacionados ao hoisting utilizando let e const para garantir um escopo mais previsível e seguro.

Arrow functions

const somar = (a, b) => a + b; // Declaração de uma arrow function que soma dois números
console.log(somar(2, 3)); // Saída: 5

1. Sintaxe concisa: menos código, especialmente para funções de uma única linha.

2. Herança de this: arrow functions não possuem seu próprio this. Em vez disso, herdam o valor de this do contexto léxico onde foram definidas.

const contador = {
  valor: 0,
  incrementar: function () {
    const aumentar = () => this.valor++;
    aumentar();
  },
};

contador.incrementar();
console.log(contador.valor); // 1

Dica de entrevista: ressalte a diferença entre arrow functions e funções tradicionais, explicando os cenários em que cada uma é mais apropriada.

Contexto do this

• O objeto global (em chamadas no escopo global);

• O objeto pai (em métodos de objetos);

• Um valor específico quando utilizado com bind, call ou apply.

const pessoa = {
  nome: "Rocket",
  apresentar() {
    console.log(`Oi, eu sou o ${this.nome}`);
  },
};

pessoa.apresentar(); // Oi, eu sou o Rocket

const apresentar = pessoa.apresentar;
apresentar(); // undefined, pois 'this' não está mais referenciando o objeto 'pessoa'

const pessoa = {
  nome: "Rocket",
  apresentar: () => {
    console.log(`Oi, eu sou o ${this.nome}`); // undefined
  },
};

pessoa.apresentar();

Dica de ouro: compare e contraste o comportamento de this em funções tradicionais e em arrow functions para destacar como elas se diferenciam.

📽️

Veja o vídeo:

Closures

function contador() {
  let count = 0;
  return function () {
    count++; // Incrementa o contador
    return count; // Retorna o valor atualizado de 'count'
  };
}

const meuContador = contador();
console.log(meuContador()); // Saída: 1
console.log(meuContador()); // Saída: 2

1. Criar funções privadas para proteger dados sensíveis.

2. Implementar memoization para otimizar cálculos caros, reutilizando resultados já computados.

function memorizar(func) {
  const cache = {};
  return function (arg) {
    if (cache[arg]) {
      return cache[arg];
    }
    cache[arg] = func(arg);
    return cache[arg];
  };
}

const quadrado = memorizar((n) => n * n);
console.log(quadrado(4)); // Calcula e armazena: 16
console.log(quadrado(4)); // Retorna do cache: 16

Dica: explique como closures ajudam a implementar encapsulamento em JavaScript, simulando comportamento de "private variables".

Escopo

• Escopo global: variáveis declaradas fora de qualquer função ou bloco estão disponíveis em toda a aplicação.

• Escopo local: variáveis declaradas dentro de uma função ou bloco só estão acessíveis naquele contexto.

function exemplo() {
  let local = "Visível apenas aqui";
  console.log(local); // Visível apenas aqui
}
console.log(local); // ReferenceError

• var: escopo baseado na função. Não respeita blocos (como loops e condicionais).

• let e const: escopo baseado no bloco. São mais seguras e evitam problemas com reatribuições indesejadas.

if (true) {
  var global = "Acessível fora do bloco";
  let local = "Apenas dentro do bloco";
}

console.log(global); // Acessível fora do bloco
console.log(local); // ReferenceError

Dica de entrevista: explique como o uso de let e const previne erros comuns, como a redefinição acidental de variáveis em escopos diferentes.

📽️

Veja o vídeo:

Prototypes e herança

function Animal(nome) {
  this.nome = nome;
}

Animal.prototype.falar = function () {
  console.log(`${this.nome} faz um som.`);
};

const cachorro = new Animal("Buddy");
cachorro.falar(); // Buddy faz um som.

class Animal {
  constructor(nome) {
    this.nome = nome;
  }
  falar() {
    console.log(`${this.nome} faz um som.`);
  }
}

const gato = new Animal("Miau");
gato.falar(); // Miau faz um som.

Dica de entrevista: compare o modelo de protótipos com o uso de classes ES6 e explique como elas são apenas açúcar sintático para facilitar a leitura e escrita de código.

Event loop

• Call Stack (Pilha de Chamadas): Onde as funções são empilhadas quando chamadas e desempilhadas quando retornam. Executa código JavaScript de forma síncrona.

• Web APIs: Fornecem funcionalidades assíncronas (como setTimeout, fetch, eventos de DOM) que não são executadas na Call Stack, mas no ambiente do navegador ou Node.js.

• Task Queue (Fila de Tarefas): Armazena as macrotarefas, como callbacks de setTimeout, setInterval, e eventos do DOM.

• Microtask Queue (Fila de Microtarefas): Armazena as microtarefas, como callbacks de Promises (funções passadas para .then() e .catch()), e MutationObserver.

1. Executa a Call Stack: O JavaScript começa executando o código síncrono na Call Stack.

2. Processa a Microtask Queue: Após a Call Stack estar vazia, o Event Loop verifica a Microtask Queue e executa todas as microtarefas em ordem, antes de processar qualquer tarefa na Task Queue.

3. Processa a Task Queue: Depois de esvaziar a Microtask Queue, o Event Loop pega a primeira tarefa da Task Queue e a coloca na Call Stack para execução.

4. Repetição: O processo se repete, garantindo que as microtarefas tenham prioridade sobre as macrotarefas.

console.log("Início"); // 1. Executa e imprime "Início"

setTimeout(() => {
  console.log("Timeout 1"); // 6. Agendado na Task Queue
}, 0);

Promise.resolve()
  .then(() => {
    console.log("Promise 1"); // 4. Agendado na Microtask Queue
  })
  .then(() => {
    console.log("Promise 2"); // 5. Agendado na Microtask Queue
  });

console.log("Fim"); // 2. Executa e imprime "Fim"

// Ordem de execução:
// 1. "Início"
// 2. "Fim"
// 3. Microtasks:
//    a. "Promise 1"
//    b. "Promise 2"
// 4. Task Queue:
//    a. "Timeout 1"

• Passo 1: console.log("Início"); é executado e "Início" é impresso.

• Passo 2: setTimeout(..., 0); é chamado. O callback é enviado para a Task Queue com tempo mínimo (não exatamente zero).

• Passo 3: Promise.resolve().then(...).then(...); As funções passadas para .then() são colocadas na Microtask Queue.

• Passo 4: console.log("Fim"); é executado e "Fim" é impresso.

• Passo 5: A Call Stack está vazia. O Event Loop verifica a Microtask Queue e executa "Promise 1" e "Promise 2" em ordem.

• Passo 6: Após esvaziar a Microtask Queue, o Event Loop pega "Timeout 1" da Task Queue e o executa.

• Prioridade: microtasks têm prioridade sobre tasks. Ou seja, todas as microtarefas são executadas antes de qualquer macrotarefa.

• Uso Comum:
• Microtasks: Promises, process.nextTick() (Node.js), MutationObserver.
• Tasks: setTimeout, setInterval, eventos de I/O, eventos do DOM.

Dica de entrevista: ao explicar o Event Loop, demonstre com exemplos como a priorização das microtarefas pode afetar a execução do código. Por exemplo, por que uma Promise é executada antes de um setTimeout com 0ms de delay.

Promises e Async/Await

fetch("https://api.example.com/dados")
  .then((resposta) => resposta.json())
  .then((dados) => console.log(dados))
  .catch((erro) => console.error(erro));

async function buscarDados() {
  try {
    const resposta = await fetch("https://api.example.com/dados");
    const dados = await resposta.json();
    console.log(dados);
  } catch (erro) {
    console.error("Erro ao buscar dados", erro);
  }
}

Dica de entrevista: explique como o uso de try/catch no async/await facilita o tratamento de erros em operações assíncronas complexas.

Map e filter

• map: aplica uma função a cada elemento do array, retornando um novo array.

• filter: retorna um novo array contendo apenas os elementos que passam em uma condição.

const numeros = [1, 2, 3, 4];
const dobrados = numeros.map((n) => n * 2); // [2, 4, 6, 8]
const pares = numeros.filter((n) => n % 2 === 0); // [2, 4]

Dica de entrevista: mostre como map e filter ajudam a escrever código mais limpo e funcional.

📽️

Veja o vídeo:

Reduce

const numeros = [1, 2, 3, 4];
const soma = numeros.reduce((acc, n) => acc + n, 0); // 10

const frutas = ["maçã", "banana", "maçã"];
const contagem = frutas.reduce((acc, fruta) => {
  acc[fruta] = (acc[fruta] || 0) + 1;
  return acc;
}, {});

console.log(contagem); // { maçã: 2, banana: 1 }

Dica de entrevista: explique como reduce pode ser usado para resolver problemas mais complexos, como agregações de dados ou transformações de estruturas.

Destructuring

const pessoa = { nome: "Rocketseat", idade: 5 };
const { nome, idade } = pessoa;

console.log(nome); // Rocketseat
console.log(idade); // 5

const numeros = [1, 2, 3];
const [primeiro, segundo] = numeros;

console.log(primeiro); // 1
console.log(segundo); // 2

const pessoa = { nome: "Rocketseat" };
const { nome, idade = 10 } = pessoa;

console.log(idade); // 10

const { nome: apelido } = pessoa;
console.log(apelido); // Rocketseat

Dica: explique como o destructuring simplifica funções que recebem objetos como parâmetros.

📽️

Veja o vídeo:

Spread e Rest

Spread: copiando e combinando

const numeros = [1, 2, 3];
const novosNumeros = [...numeros, 4, 5];

console.log(novosNumeros); // [1, 2, 3, 4, 5]

const pessoa = { nome: "Rocketseat", idade: 5 };
const novaPessoa = { ...pessoa, cidade: "São Paulo" };

console.log(novaPessoa); // { nome: "Rocketseat", idade: 5, cidade: "São Paulo" }

📽️

Veja o vídeo:

Rest: coletando itens

function somar(...numeros) {
  return numeros.reduce((total, num) => total + num, 0);
}

console.log(somar(1, 2, 3, 4)); // 10

const pessoa = { nome: "Rocketseat", idade: 5, cidade: "São Paulo" };
const { nome, ...restante } = pessoa;

console.log(restante); // { idade: 5, cidade: "São Paulo" }

Dica: Explique como o uso de spread e rest evita mutações desnecessárias ao trabalhar com estruturas imutáveis.

📽️

Veja o vídeo:

Falsy e truthy

Valores falsy

if (0) {
  console.log("Nunca será executado");
} else {
  console.log("Falsy");
}

Valores truthy

if ("Rocketseat") {
  console.log("Valor truthy!"); // Executado
}

Exemplo prático com validação

const input = "";
console.log(input || "Valor padrão"); // Valor padrão

Dica: Discuta como o JavaScript realiza coerção implícita ao determinar valores truthy ou falsy.

Manipulação do DOM

const botao = document.getElementById("botao");
botao.addEventListener("click", () => {
  alert("Botão clicado!");
});

Exemplo: alterando o conteúdo de um elemento

const titulo = document.querySelector("h1");
titulo.textContent = "Bem-vindo à Rocketseat!";

Exemplo: criando e adicionando elementos

const lista = document.querySelector("#lista");
const novoItem = document.createElement("li");
novoItem.textContent = "Novo item";
lista.appendChild(novoItem);

Dica: Ressalte a importância de evitar manipulações excessivas do DOM para otimizar a performance.

📽️

Veja o vídeo:

Debouncing e Throttling

Debouncing

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func(...args), delay);
  };
}

const processarScroll = debounce(() => console.log("Scroll processado!"), 200);
window.addEventListener("scroll", processarScroll);

📽️

Veja o vídeo:

Throttling

function throttle(func, limit) {
  let emExecucao = false;
  return function (...args) {
    if (!emExecucao) {
      func(...args);
      emExecucao = true;
      setTimeout(() => (emExecucao = false), limit);
    }
  };
}

const processarResize = throttle(() => console.log("Resize processado!"), 200);
window.addEventListener("resize", processarResize);

Dica: Discuta como essas técnicas ajudam a otimizar a performance da aplicação, reduzindo o número de chamadas desnecessárias.

Dicas para mandar bem na entrevista

Entenda o "porquê" dos conceitos

• Por que o JavaScript tem hoisting?

• Como o this varia dependendo do contexto?

• Quando closures são realmente úteis?

Pratique com projetos reais

• Criar uma to-do list usando closures para gerenciar tarefas.

• Implementar um debounce para otimizar eventos de rolagem.

• Construir um jogo simples, como Pedra, Papel e Tesoura, para explorar lógica condicional.

📽️

Veja o vídeo:

Desenvolva respostas concisas e impactantes

• Para explicar hoisting, diga:

"O JavaScript 'eleva' declarações para o topo do escopo antes da execução, mas apenas declarações, não inicializações. Isso explica por que você pode acessar uma variável antes de declará-la com var, mas não com let ou const."

• Use snippets curtos de código para reforçar sua explicação.

Entenda o contexto da vaga

📽️

Veja o vídeo:

Mostre que você resolve problemas

1. Identifique o problema: explique o contexto.

2. Descreva a solução: mostre o raciocínio por trás de sua abordagem.

3. Adicione valor: diga como sua solução impacta a performance, a legibilidade ou a manutenibilidade do código.

📽️

Veja o vídeo:

Simule a entrevista

• "Explique o que são closures e dê um exemplo prático."

• "Como o JavaScript gerencia tarefas assíncronas no event loop?"

• "Qual a diferença entre map, filter e reduce?"

📽️

Veja o vídeo:

Demonstre interesse e curiosidade

Conclusão