sábado, 21 de março de 2015

Javascript Fundamentos - Parte 1: Escopo Global

E aí pessoal! Vamos ao primeiro post do meu novo blog? A primeira linguagem que escolhi pra falar foi a que eu considero ser uma das mais poderosas linguagens já criadas: Javascript! Uma linguagem que evoluiu bastante, especialmente nos últimos anos, quando ela deixou de ser usada apenas pra dar mais interatividade às páginas (exibir alertas, capturar cliques, etc) e foi parar no lado do servidor (V8 e Node.js).

Bem, mas eu não vou dissertar aqui sobre a história do Javascript, se você quiser saber mais sobre ela, você pode clicar aqui. Também não vou falar sobre os conceitos básicos da linguagem, como por exemplo, criar uma variável, exibir alertas, capturar eventos, etc. Neste, e em outros posts, irei tratar de assuntos mais interessantes como: escopos, this, modules, closures, functions, prototypes, etc.

Javascript não é nenhum bicho de sete cabeças, mas como toda linguagem, possui suas nuances. Por ser uma linguagem de script, além de dinamicamente e fracamente tipada, permite uma experiência de uso bem simplificada. É possível escrever e testar um código javascript de forma rápida, você só precisará ter um browser instalado e usar um editor de texto qualquer.

Essa relativa simplicidade, porém, traz consigo um grande perigo: o de todo mundo achar que sabe Javascript! Especialmente aqueles que vêm de outras linguagens como Java, C#, PHP, etc. E ao pular os conceitos fundamentais, acabam se deparando com comportamentos estranhos em seus códigos. Nesta série de artigos pretendo abordar alguns desses conceitos que podem causar 'problemas'.

Depois desta introdução, mais longa do que eu gostaria que fosse, vamos ao primeiro conceito fundamental: Escopo! Entender escopo é essencial para compreender como suas variáveis interagem com as outras partes de seu código. Na maioria das linguagens a coisa é bem simples. Em Java, por exemplo, você aprende que existe o escopo de bloco ou de método, escopo de instância e o escopo de classe (uma espécie de escopo global). Mas e em Javascript, será que a coisa é muito diferente?

O primeiro escopo que iremos aprender em Javascript é o chamado Global Scope. Se você já escreveu algum código Javascript na sua vida, certamente você já declarou alguma variável no escopo global. O trecho de código abaixo mostra um exemplo bem simples dele:

Onde você lê global, entenda window. Isso quer dizer que uma variável nesse escopo será acessível por qualquer código em uma janela (ou aba) do seu browser. Legal né? A menos que você tenha vários arquivos Javascript diferentes carregados nessa janela. Enxergou a bronca? Aqui pode acontecer o famoso sombreamento de variáveis (shadowing), que ocorre quando temos duas variáveis declaradas com o mesmo nome em escopos diferentes.

Entretanto, o escopo global é importante quando realmente precisamos compartilhar algo através de múltiplos escopos. Vários frameworks fazem uso dele, como o jQuery, por exemplo. Esse tipo de estrutura também é chamado de namespace, e é graças a ele que você consegue fazer coisas como esta:

Você cria um namespace como uma forma de encapsular suas variáveis dentro dele, evitando conflito com outras bibliotecas (o tal do shadowing), e assim, o seu namespace fica no escopo global e suas variáveis ficam aninhadas nele. Existe uma forma mais legal (e mais moderna) de evitar colisões de nomes, que são os módulos, mas isso a gente vai ver em um outro momento. Antes, vejamos como criar o nosso próprio namespace global:

Bom galera, para o post não ficar maior do que já está, vamos dar uma paradinha por aqui. O escopo global é certamente o mais simples de entender, apesar de ele causar alguns problemas, como o da colisão de nomes, vimos que esses problemas podem ser contornados com o uso de namespaces ou modules (veremos isso depois).

No próximo post a gente continua falando de escopos, e aí falaremos sobre os escopos local, de função e o escopo léxico. Como já nos livramos dessa parte introdutória, prometo que os próximos posts serão mais interessantes. Então, até o próximo post!

Nenhum comentário:

Postar um comentário