Diego Martins de Pinho
Mar 10 · 3 min read

Aprender JavaScript não é uma tarefa fácil. Além das bibliotecas e frameworks mais famosos do momento — 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 próprias características. 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
  • Closures
  • E a lista é longa…

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.

Execução de código no JS Visualizer

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.

Detalhes da execução da função makeAdder

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


Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.brFacebook, Twitter, Youtube

Siga o autor deste artigo e troque uma ideia com ele! http://www.diegopinho.com.brTwitter, LinkedIn

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Diego Martins de Pinho

Written by

Desenvolvedor de Software, Fundador da CodePrestige e autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade