Aprender JavaScript não é uma tarefa fácil. Além das bibliotecas e frameworks mais famosos do momento – aqui, leia React, Angular e Vue – o ecossistema da linguagem está recheado de alternativas para as mais diversas finalidades.

Falou em aplicativos desktop? Temos o Electron. Apps híbridos? Ionic e o React Native! Back-end? O bom e velho Node, e por aí em diante.

No entanto, o número de opções dentro da linguagem é tão grande que acaba cegando o(a) profissional de tecnologia e desviando-o(a) do que é realmente importante: aprender como o JavaScript em si funciona.

Os conceitos do JavaScript

Não há como negar que o JavaScript é uma linguagem fantástica. Sua popularidade atual se deve à sua grande flexibilidade, resultado de suas características próprias. Porém, essas características não são nem um pouco triviais. Dentro dessa lista podemos citar:

• Tipagem dinâmica
• Hoisting
• Contexto de execução
• Escopos
• Clojures
• Entre outras

Mas como fazer para aprender essas particularidades?

A tarefa realmente não é fácil, mas felizmente existem ferramentas que nos ajudam nessa missão. Uma delas é o JavaScript Visualizer.

“Visualizando” o JavaScript

O JavaScript Visualizer é uma ferramenta web que nos ajuda a entender como o JavaScript executa suas tarefas. A tela é dividida em duas grandes áreas: a da esquerda, onde colocamos o código e temos o controle das ações (o que lembra muito o debugger do navegador). E o lado direito, com a área de características: aqui veremos como o JavaScript está interpretando as informações.

Do lado dos controles, logo no topo, temos cinco opções:

• Step: move a execução do seu código para o próximo passo;
• Run: executa o código;
• Restart: reinicia toda a execução do código;
• Serialize: serializa toda a informação na tela e o torna disponível via URL para que você compartilhe as informações com outros;
• Run Speed: torna possível alterar a velocidade da execução do código.

No campo abaixo, podemos escrever qualquer código ES5 que o compilador interno executará de acordo com as ações do usuário. Para cada passo, as cores no editor vão se alterar para reforçar visualmente qual parte está sendo executada. Por exemplo, no trecho abaixo a função makeAdder está sendo executada.

Repare que no bloco amarelo temos o Contexto de Execução na invocação desse método. Neste momento, temos que o this é igual ao window, que x é igual a 5 e que os argumentos são um objeto. Com este exemplo podemos estudar, além do contexto de execução em si, como funciona o this e para quem ele aponta de acordo com a sua localização.

Bem legal, né? Além destes exemplos, há alguns outros já prontos que nos ajudam a entender alguns conceitos:

• Simple Closure
• Complex Closures
• Scope Chain
• Bubble Sort
• Pseudoclassical Pattern
• The this Keyword

Basta clicar em cada um dos links na aplicação que o código é atualizado automaticamente para testarmos.

“Visualizando” o JavaScript

Como citei anteriormente, aprender JavaScript não é fácil. A linguagem, além de ser complexa, recebe novas atualizações anualmente, o que torna a carga de estudos necessária ainda maior.

O JavaScript Visualizer nasceu com a proposta de ser uma ferramenta de apoio para entender o funcionamento da linguagem. Além de ser familiar, oferece funcionalidades que tornam o ensino bastante visual, o que pode fazer toda a diferença.

Referências

• https://tylermcginnis.com/javascript-visualizer