Entendendo o uso de escopo no JavaScript

Aprenda a usar escopo de forma correta em seus códigos JavaScript

Ao utilizamos à linguagem de programação JavaScript é muito importante e imprescindível que entendamos como aplicar escopo de variável de forma correta, para que possamos evitar erros em nosso código, erros os quais acabam se tornando mais difíceis de serem identificados, pois não se tratam de erros de sintaxe do código e sim de coerência e coesão do mesmo, onde o código é interpretado corretamente, porém não estará funcionando de forma como deveria, de forma a fazer com que certas partes da aplicação ou site não funcionem corretamente ou até mesmo parem de funcionar, assim torna-se muito importante que tenhamos pleno conhecimento da utilização correta de escopo no JavaScript.

O que é o escopo de uma variável?

Quando nos referimos a escopo de variável estamos se referindo a qual local de nosso código uma determinada variável pode ser acessada. No JavaScript existem somente dois tipos de escopos, que são eles, escopo global e local. O código a seguir ilustra basicamente como funcionam esses dois escopos.

Figura 1 - Ilustração utilização de escopo global e local.

Declarando variáveis no escopo global

Uma variável global é definida quando declaramos uma variável fora de qualquer função, assim ela torna acessível a qualquer parte da nossa aplicação ou site, podendo ser lida e alterada. Agora vejamos um simples exemplo de como podemos declarar uma variável global:

Figura 2— Exemplo usando variável com escopo global.

Como podemos ver no exemplo anterior foi declarado uma variável global chamada myName, onde ela está acessível a qualquer parte desse código, de tal forma, como podemos observar seu acesso e alteração dentro da função showName.

Declarando variáveis no escopo local

Uma variável se torna local quando ela é declarada dentro de uma função, de tal maneira a qual ela somente estará acessível dentro dessa função. Podemos ver um exemplo a seguir da declaração de uma variável local:

Figura 3 - Exemplo usando variável com escopo local.

Como podemos ver no exemplo acima o escopo local se delimita a chave de abertura e fechamento da função showName, onde no exemplo acima está destacado pelo retângulo amarelo. Ao executamos esse script um erro será mostrando, onde a variável myLastName está sendo usada fora do escopo da função showName, isso porque ela não existe fora do escopo dessa função.

Caso existam sub-funções dentro de uma função pai, todas as sub-funções também terão acesso a todas as variáveis declaradas dentro da função pai. Assim como podemos ver no exemplo a seguir:

Figura 4— Exemplo usando sub-função com variável com escopo local.

Declarando variáveis sem o uso de var

Ao declaramos uma variável sem o uso da palavra reservada var estaremos criamos uma variável global implicitamente, e automaticamente ela se torna global independente de onde ela for definida, assim também se tornando uma propriedade do objeto window do navegador ou do objeto global se estivemos utilizando o nodejs.

Vejamos um exemplo onde será definida uma variável dentro do escopo de uma função, porém sem o uso da palavra reservada var, assim essa variável se tornará uma variável global, podendo ser acessada em qualquer parte do código:

Figura 5— Exemplo usando variável sem uso de var.

Minimizando a utilização de variáveis com escopo global

Quando desenvolvemos aplicações ou sites em JavaScript é um boa pratica que sempre evitamos ou minimizamos ao máximo a utilização de variáveis globais, pois sua utilização pode acarretar em possíveis problemas em nosso código.

Pois, como já foi dito anteriormente quando criamos uma variável global, essa variável fica acessível em todo nosso código, e o principal problema nisso é que isso pode acarretar em problemas de colisão de nomes em nossos scripts, e dificulta na modularização. Vejamos um exemplo onde um erro ocorre:

Figura 6— Exemplo minimizando a utilização de variáveis com escopo global.

O exemplo anterior é um exemplo simples, porém podemos perceber como a utilização de variáveis globais pode ocasionar erros, onde nesse exemplo a função formatName que apenas deveria formatar um nome e retorna-lo, está alterando a variável global myName, assim fazendo com que na linha 16 ao invés de mostrar um nome mostre outro, como podemos ver em sua saída:

JOÃO
JOÃO

Evitar a utilização de variáveis globais nem sempre é possível, então uma solução para que possamos evitar ou diminuir a chances de erros, é criamos um objeto global ao invés de variáveis. Assim todas as variáveis que precisamos criar de forma global nós as colocaremos nesse objeto. Um exemplo seria o seguinte:

Figura 7 — Exemplo usando objeto com escopo global.

Blocos no JavaScript não têm escopo

É bom ressaltar que no JavaScript blocos de instruções como IF, FOR, WHILE etc. não criam seu próprio escopo como acontece em outros linguagem de programação que são semelhantes ao C, de forma como já foi dito anteriormente que no JavaScript somente existem dois tipos de escopos, que são eles escopo global e escopo local.

Por isso, por questão de boa pratica, sempre tentem evitar a criação de variáveis dentro de blocos, pois isso pode causar comportamentos indesejáveis, os quais na maioria das vezes podem ficar difíceis de serem identificados, caso você não tenha pleno conhecimento da utilização de escopo no JavaScript. Como por exemplo:

Figura 8 - Exemplo usando declarando variável dentro de escopo de bloco.

No exemplo anterior podemos perceber como uma variável criada dentro do escopo de bloco também existirá fora do mesmo, e muitas vezes isso não é o comportamento que esperamos, estão sempre é bom evitar declaração dentro de blocos de código.

Obs.: A partir da versão do ECMAScript 6 ele nos fornece uma nova instrução chamada let que nos permite criar variáveis com escopo de bloco.

Conclusão

O JavaScript é uma linguagem que têm muitas peculiaridades, então sempre é bom que estejamos atentos a elas, pois muitas vezes podemos evitar muitos erros por temos pleno conhecimento delas.

Nesse artigo foi abordado somente sobre a utilização de escopo no JavaScript, porém ainda existem muitos assuntos em relação a isso, que podemos estudar, como o processo de hoisting, IIFE (Imediately Invoked Function Expression) etc..

Se gostou do artigo dê like ❤️e me siga, para acompanhar novos artigos. Mas se gostou muito, compartilha que ficarei muito grato. E sinta-se à vontade para fazer comentários, sobre dúvidas, críticas construtivas (ou não), melhorias e agradecimentos.