Perguntas de entrevista de Front-End JavaScript — Como se preparar

Guia para se preparar para perguntas de JavaScript em entrevistas para desenvolvedores front-end / web — Conceitos a saber, rubricas de entrevista e mais de 70 perguntas de prática importantes. Você provavelmente também precisará usar APIs específicas de navegador/JavaScript e/ou utilizar conhecimentos de HTML/CSS/JavaScript.

Exato, você provavelmente precisará utilizar Apis específicas do navegador/JavaScript e/ou aplicar conhecimentos em Html/Css/JavaScript:

1. Implemente classes ou métodos padrão incorporados na linguagem JavaScript.
2. Implemente uma função/utilitário/classe comumente encontrada em bibliotecas populares.

Exemplos

Classes/Métodos Padrão Incorporados em JavaScript

Pode parecer redundante implementar classes/métodos padrão quando eles já fazem parte da linguagem. No entanto, inconsistências entre navegadores costumavam ser um problema comum, e algumas APIs da linguagem não eram encontradas em navegadores mais antigos. Portanto, os desenvolvedores tiveram que recorrer ao polyfilling, que é o ato de fornecer funcionalidade moderna em navegadores mais antigos que não a suportam nativamente, implementando essas APIs em JavaScript baixado. Ser capaz de implementar essas funções nativas também demonstra um bom entendimento dos fundamentos do desenvolvimento front-end.

• Métodos Array: Array.prototype.map, Array.prototype.reduce, Array.prototype.filter.
• Promise e outras funções Promise: Promise.all, Promise.any.
• Métodos DOM: document.getElementsByTagName, document.getElementsByClassName.

Há mais nessas funções do que aparenta à primeira vista. Vamos pegar o inocente Array.prototype.map, por exemplo. Você está ciente de que:

1. Ele passa 4 argumentos para o retorno de chamada, incluindo o índice e o this?
2. Ele mantém os "buracos" em matrizes esparsas, como [1, 2, , 4].map(val => val * val) === [1, 4, , 16].
3. A faixa de elementos processados pelo map é definida antes da primeira chamada a _callbackfn_. Elementos que são adicionados ao array após o início da chamada para map não serão visitados por _callbackfn_. Se os elementos existentes do array forem alterados, o valor passado para _callbackfn_ será o valor no momento em que map os visitar; elementos que forem excluídos após o início da chamada para map e antes de serem visitados não serão visitados. Fonte: Array.prototype.map Especificação do ECMAScript

Sua implementação não precisa lidar com todos esses casos, especialmente o da mutação do array. No entanto, é um sinal positivo se você mencionar esses casos durante a implementação. Quanto mais próxima for a sua implementação da especificação, mais sênior/experiente você parecerá ser.

Função/Classe utilitária de bibliotecas populares

Essas funções/classes são comumente necessárias ao construir software com JavaScript, mas não fazem parte da linguagem padrão (por enquanto).

• Funções Lodash/Underscore: debounce, throttle, flatten, curry, cloneDeep.
• Métodos jQuery: jQuery.css, jQuery.toggleClass.
• Bibliotecas populares:
  • classnames
  • test/expect funções de testes de frameworks como Jest/Mocha
  • Emitter (que existe como parte do Node.js e muitas bibliotecas de terceiros)
  • Immutable.js
  • Backbone.js

Se você der uma olhada no código-fonte dessas bibliotecas, poderá encontrar algumas das implementações bastante complexas. Isso ocorre porque existem muitos casos de uso do mundo real obscuros que a biblioteca precisa suportar. Semelhante às funções padrão, você não é esperado para lidar com todos esses casos extremos durante uma entrevista, mas ganha pontos por reconhecê-los.

O que fazer durante entrevistas de codificação em JavaScript

Entrevistas de codificação em JavaScript compartilham muitas semelhanças com entrevistas de codificação algorítmica. Em geral, você deve:

1. Descubra em qual plataforma você está codificando e familiarize-se com o ambiente de codificação:
   • Os atalhos de editor suportados.
   • Se você pode executar código.
   • Se você pode instalar dependências de terceiros.
2. Faça sua apresentação pessoal em menos de um minuto. A menos que seja solicitado, não leve mais tempo do que isso, caso contrário, você pode não ter tempo suficiente para programar.
3. Faça perguntas de esclarecimento ao receber a pergunta. Esclareça o seguinte:
   • Você pode usar a sintaxe mais recente do JavaScript (ES2016 e posteriores)?
   • Se o código se destina a ser executado no navegador ou no servidor (por exemplo, Node.js).
   • O suporte do navegador é importante, pois isso afetará as APIs do navegador que você pode utilizar.
4. Proponha uma solução ao seu entrevistador. Ao contrário de entrevistas de programação convencionais, o foco das entrevistas de codificação em JavaScript geralmente não está em estruturas de dados complexas e algoritmos. É possível e provavelmente você pode ir direto para a solução ideal com a melhor escolha de estruturas de dados e algoritmos.
5. Codifique sua solução e explique o código ao seu entrevistador enquanto você está programando.
6. Após codificar, leia seu código uma vez e tente identificar erros básicos, como erros de digitação, uso de variáveis antes de inicializá-las, uso incorreto de APIs, etc.
7. Elabore alguns casos de teste básicos e alguns casos limite (edge cases). Teste seu código com esses casos e determine se o código os passa com sucesso. Se falhar, depure o(s) problema(s) e corrija-os.
8. Opcional: Explique a complexidade de tempo/espaço se o código envolver otimizações algorítmicas e uma escolha inteligente de estruturas de dados.
9. Explique qualquer trade-off que você tenha feito, casos que você não tratou explicitamente e como você melhoraria o código se tivesse mais tempo.
10. A entrevista pode não terminar aqui; o entrevistador pode ter perguntas de acompanhamento sobre esta questão ou apresentar outra pergunta. Esteja preparado para elas.

Como se preparar para entrevistas de codificação em JavaScript

1. Esteja familiarizado com os conceitos de HTML, CSS, JavaScript e DOM, consultando os "Conceitos Importantes" abaixo. A seção de Quiz também pode ser um bom começo, já que você pode ser questionado sobre esses conceitos na forma de perguntas de quiz durante a codificação.
2. Escolha um plano de estudos e pratique as perguntas de codificação JavaScript recomendadas para o plano de estudos selecionado. Também está tudo bem estudar um tópico específico enquanto você está fazendo as perguntas.

Conceitos Importantes

Critérios de Avaliação para Entrevistas de Codificação em JavaScript

As entrevistas de codificação em JavaScript são semelhantes às entrevistas de codificação algorítmica, e a abordagem para essas entrevistas deve ser semelhante. Naturalmente, haverá alguma sobreposição com entrevistas de codificação algorítmica no que diz respeito à avaliação dos candidatos durante entrevistas de codificação em JavaScript.

• Resolução de Problemas: Utilize uma abordagem sistemática e lógica para compreender e resolver um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (tradeoffs).
• Fundamentos de Engenharia de Software: Familiaridade com estruturas de dados, algoritmos, análise de complexidade de tempo de execução, uso de padrões de design e elaboração de soluções com abstrações limpas.
• Expertise no Domínio: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs DOM), HTML, CSS, JavaScript, Desempenho.
• Comunicação: Fazer perguntas para esclarecer detalhes e explicar claramente a abordagem e as considerações.
• Verificação: Identificar vários cenários para testar o código, incluindo casos extremos. Seja capaz de diagnosticar e corrigir quaisquer problemas que surjam.

Dicas Úteis

• Pensamento Positivo. A biblioteca padrão do JavaScript não possui algumas estruturas de dados e algoritmos úteis, como fila, heap, pesquisa binária, que podem facilitar sua vida durante entrevistas de codificação em JavaScript. No entanto, você pode perguntar ao entrevistador se pode considerar que uma determinada estrutura de dados/algoritmo existe e usá-la diretamente em sua solução sem implementá-la.
• Funções Puras. Aim to write pure functions which have the benefit of reusability and modularity, aka functions which don't rely on state outside of the function and doesn't cause side effects.
• Escolha as estruturas de dados sabiamente. Preste atenção à escolha das estruturas de dados e esteja ciente das complexidades temporais do código. Esteja familiarizado com as complexidades de tempo/espaço das operações básicas de Array, Object, Set e Map em JavaScript, caso deseje usá-las em sua solução. Alguns desses tempos/complexidades de espaço podem variar entre diferentes linguagens de programação. É importante estar ciente das particularidades da linguagem que você está usando para garantir que suas escolhas sejam apropriadas para o contexto específico. Não escreva código que seja executado em O(n²) se ele puder ser executado em O(n) com o uso de hash mapas.
• this importa. Se uma função aceita uma função de retorno de chamada como parâmetro, considere como a variável this deve se comportar. Para muitas funções internas, this é fornecido como um dos argumentos com os quais a função de retorno de chamada é invocada.
• Mutação dentro de funções de retorno de chamada. Cuidado com as funções de retorno de chamada que realizam mutações na estrutura de dados na qual estão operando. Provavelmente, você não precisa lidar com esse caso durante entrevistas, mas deve mencionar explicitamente esses casos se forem relevantes.
• Casos limites de recursão.
  • Se você identificou que resolver a pergunta requer recursão, pergunte sobre o tamanho da entrada e como lidar com o caso de estouro de pilha de recursão. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
  • Estruturas de dados profundamente aninhadas podem ter referências recursivas a si mesmas, o que torna certas operações, como serialização, muito mais complexas. Pergunte ao entrevistador se você precisa lidar com tais casos. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.

Perguntas sobre Melhores Práticas

Pela minha experiência, as melhores perguntas de entrevista de codificação em JavaScript para praticar, conforme determinado pela frequência e pelos conceitos importantes abordados são:

• Debounce
• Throttle
• Array.prototype.filter
• Promise.all
• Curry
• Flatten
• getElementsByTagName
• Deep Clone
• Seleção de Dados

A GreatFrontEnd possui uma lista abrangente de perguntas de codificação JavaScript que você pode praticar. Também existem casos de testes automatizados que você pode executar em seu código para verificar a correção e soluções escritas por ex-engenheiros sênior da FAANG.

Note que, de propósito, somos vagos em algumas das perguntas e não apresentamos os requisitos completos de imediato na descrição da pergunta. No entanto, abordaremos o máximo possível na solução. Pode ser frustrante ao ler as soluções perceber que você deixou passar algumas coisas, mas isso o treina a pensar adiante e considerar quais são as áreas possíveis que você deve observar ao trabalhar na solução. É mais proveitoso descobrir durante a preparação do que durante entrevistas de verdade.