Allysson Santos

Front-end Developer

Javascript Basics 1 - Escopos de variáveis.

Introdução:

Entenda como funcionam os escopos no Javascript, nessa primeira parte entenda sobre escopo de variáveis globais e locais.

Javascript Basics 1 - Escopos de variáveis.
Nível: iniciante

O que significa Escopo?

Vamos começar explicando, o que significa Escopo? Escopo é a visibilidade de uma variável, é onde você consegue acessar o valor de uma determinada variável.

Dito isso, temos 2 tipos de escopos no javascript, o Escopo Global e o Escopo Local. Uma variável que está no escopo Global pode ser acessada de qualquer lugar de nosso código javascript, porque a variável de escopo Global fica no nível de window, e todos tem acesso à window. Por exemplo:

var nome = "Allysson";

Se chamarmos a variável nome em qualquer ponto de nosso script receberemos "Allysson" como retorno, pois ela está no escopo global. Já no exemplo a seguir:

1
2
3
function imprimeNomeCompleto() {
  var nomeCompleto = "Allysson dos Santos";
}

A variável nomeCompleto só estará visível dentro da função imprimeNomeCompleto, caso tente acessar o valor da variável de fora da função, receberemos um erro como retorno. Exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var nome = "Allysson"; // Declaração de variável no escopo Global

function imprimeNomeCompleto() {
  var nomeCompleto = "Allysson dos Santos"; // Declaração de variável no escopo Local da função imprimeNomeCompleto
  console.log(nomeCompleto);
}

console.log(nome);
> "Allysson";

console.log(nomeCompleto);
> Uncaught ReferenceError: nomeCompleto is not defined

imprimeNomeCompleto();
> Allysson dos Santos

E se por acaso, fizessemos isso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var global = "Estou no escopo global!";

function imprimeNome() {
  var nome = "Allysson dos Santos";
  console.log(nome);
  console.log(global);
}

console.log(global);
> "Estou no escopo global!";

console.log(nome);
> Uncaught ReferenceError: nome is not defined

imprimeNome();
> Allysson dos Santos
> Estou no escopo global!

Podemos notar que a função imprimeNome tem acesso a variável "nome" que está no seu escopo local, e também tem acesso a "global", pois ela está no escopo global. Portanto, o filho (imprimeNome) tem acesso ao escopo do pai (window). Outro exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var carro = "Subaru Impreza";

function imprimeVeiculo() {
  console.log(carro);
  moto = "Biz";
}

---

console.log(carro); // logamos a variável carro que está no escopo global
> "Subaru Impreza";

imprimeVeiculo(); // executamos a função que imprime a variável "carro" que está no escopo global, e cria a variável moto.
> Subaru Impreza

console.log(moto); // imprimimos a variável "moto" que está dentro da função imprime veículo.
> Biz

Como vimos no caso acima, mesmo a variável moto sendo declarada dentro da função imprimeCarro ela estará visível no escopo global após chamarmos a função imprimeCarro. Então, para evitar poluir o escopo global, sempre utilizamos a palavra-chave reservada var para declararmos nossas variáveis.

No javascript, quando utilizado a palavra reservada var os blocos não terão escopo próprio, como if, while, for, etc... instruções de condição não criarão escopos próprios.

1
2
3
4
5
6
var a = 1;
var b = 1;

if (a + b == 2) {
  var resultado = "é dois!" // essa variável está no escopo global!
}
comments powered by Disqus