33 fundamentos que todo desenvolvedor JavaScript deveria saber

Por que raios i é igual a 10 de repente?

Você aprendeu React, é mestre em npm install, e consegue encontrar o seu próprio caminho com o webpack.config.js. Você pode fazer qualquer coisa, desde que haja um módulo para isso, e parece haver um módulo para tudo. Mas o que acontece quando você não consegue encontrar um módulo? Onde você vai quando não consegue encontrar a resposta no Stack Overflow? Você se sente como um desenvolvedor sólido, mas há uma sensação de ‘roer’ no abismo do seu estômago. Você não gosta de pensar sobre isso, mas está lá. A verdade… Muito disso é magia para você. Se não houvesse um exemplo lá fora, em alguns casos, você não teria ideia de como isso funcionaria.

O que você pode fazer? E se alguém descobrir? Talvez essa seja a REAL razão do porque as lousas (ou quadros) brancas(os) te assustam? Não se preocupe mais amigo desenvolvedor. Todos estávamos lá. A solução está te encarando esse tempo todo, e sim ambos sabemos que você está evitando isso. Talvez seja a hora de realmente entender o JavaScript, e talvez até aprender um pouco sobre ciência da computação.

Aqui está o que você precisa fazer:

1. Entender como uma linha de código alto nível como o JavaScript se transforma e é executada como uma estrutura de pilha na pilha de chamadas (de linguagens de alto nível para código de máquina).
2. Entender como diferentes tipos primitivos são armazenados na memória, até os endereços, o espaço alocado e a representação binária (se você não encontrou a palavra mantissa, você não foi longe o suficiente).
3. Entender a diferença entre tipos de valor e tipos de referência, e assinatura de valores versus assinatura de ponteiros.
4. Entender tipagem implícita, tipagem explícita, tipagem nominal, tipagem estrutural, e tipagem de pato (duck typing).
5. Entender == versus === versus typeof.
6. Entender escopo de função, escopo de bloco, e escopo léxico.
7. Entender a diferença entre uma expressão e uma declaração, e o que significa avaliar (evaluate) uma expressão.
8. Entender o que acontece (ou não) na memória/na pilha de chamadas quando uma expressão é avaliada (evaluated), argumentos passados, resultado retornado, etc. versus quando um valor é atribuído ou recuperado de uma variável.
9. Entender IIFE’s, módulos, e namespaces. E porque módulos ES6 e escopo de bloco não substitui completamente o IIFE.
10. Entender como a fila de mensagens e o ciclo de eventos funcionam especificamente no JavaScript e como isso afeta o tempo, o travamento, o async, etc.
11. (navegador) Entender setTimeout, setInterval e requestAnimationFrame.
12. Entender quais operações são mais custosas e porque (custosas significam gastar mais tempo de processamento ou memória). O número de iterações é realmente o mais impactante no desempenho (normalmente)? O que a notação Big O realmente quer nos dizer? Use jsperf e performance.nowpara executar alguns testes e descubra.
13. Entender o que são opts e deopts, e como manter-se atualizado nos diferentes motores JavaScript.
14. Entender representar números em binário, hexadecimal, decimal, notação científica, etc. Em JavaScript e outras linguagens.
15. Entender como funcionam operadores bitwise, typed arrays e array buffers. Use o conceito de RGBA como uma maneira de entender como manipular dados binários.
16. (navegador) entender como o DOM e as estruturas de layout na memória são criadas e modificadas, quando/como refluxos/layouts, composições e repaint são desencadeados.
17. Entender new, construtores, instanceof, e instâncias.
18. Entender herança prototipada e cadeia de protótipos. E como mesmo com class o JavaScript ainda não atinge a herança clássica.
19. Entender a diferença entre Object.create e Object.assign.
20. Entender factories e classes, e como essas abordagens diferem.
21. Entender a diferença entre propriedades do membro e propriedades do protótipo.
22. Entender funções puras, efeitos colaterais, e mudança de estado.
23. Entender como quase todo o laço for/while pode ser substituído por um map/reduce/filtere por quê.
24. Entender o que são lambdas (LINQ no C# por exemplo), e comomap/reduce/filter + arrow functions alteram a maneira de como você pensa sobre seu código.
25. Entender como closures funcionam, e como eles olham para a pilha de chamadas.
26. Entender como high order functions funcionam, e quando usá-las.
27. Entender o que são estruturas de dados abstratas, como construí-las em JavaScript, e casos de uso típicos para elas.
28. Entender recursão e como usá-la para criar estruturas de dados abstratas.
29. Entender que existem algoritmos para resolver muitos problemas comuns, e tornar-se familiar o suficiente com eles para encontrar o que você precisa no Google porque ninguém se lembra de todos eles. Ou mesmo a maioria deles.
30. Entender a diferença entre é um e tem um relacionamento quando se trata de herança, polimorfismo e reutilização de código.
31. Tornar-se familiar com os padrões de design comuns, e quais utilizar em JavaScript.
32. Entender funções parciais, currying, composição, e pipe. E entender por que as funções unárias são tão úteis.
33. Entender como a reflexão é diferente em JavaScript do que em linguagens fortemente tipadas, compiladas e por quê.

Lá está você. A chave para a desmistificação. Esqueci de alguma coisa? Se assim for, sinta-se à vontade para me enviar um tweet: @stephenthecurt

Material que esqueci e que as estrelas do rock dos desenvolvedores apontaram:

34. Erika Ritter lembrou-me que é importante entender delegates. Não apenas delegação em um contexto de protótipo, mas delegação como pertencente ao this e entender como bind, call, e apply funcionam. Bônus: (navegador) Entender o que é delegação de eventos, e como os três usos do termo delegate estão dizendo a mesma coisa.

Créditos

• 33 Fundamentals Every JavaScript Developer Should Know, escrito originalmente por Stephen Curtis
• Queria deixar aqui meu muito obrigado a Fernanda Bernardo pela ajuda na tradução do post.