JavaScript: conceitos-chave para brilhar na entrevista

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.

Reduce

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