5

🤓VAR, LET e CONST - Você conhece escopos?👨‍💻 👩‍💻

#JavaScript
Thiago Guedes
Thiago Guedes
Escopo- é a finalidade, o alvo, ou o intento que foi estabelecido como meta final. O escopo é o objetivo que se pretende atingir, é sinônimo de fim, propósito ou desígnio.


Na maioria das linguagens de programação, o escopo das variáveis locais é vinculado ao bloco onde elas são declaradas. Sendo assim, elas “morrem” ao final da instrução em que estão sendo executadas.

Hoisting

Em JavaScript, toda variável é “elevada ou içada”- hoisting- até o topo do seu contexto de execução. Esse mecanismo move as variáveis para o topo do seu escopo antes da execução do código.
Saiba que é possível usar uma variável antes dela ter sido declarada”: em tempo de execução a variável será elevada (hoisting) e tudo funcionará corretamente! Incrível, não?!

var

Considerando o conceito de hoisting, vamos fazer um pequeno teste usando uma variável declarada com var antes mesmo dela ter sido declarada:
function(){ 
    console.log(mensagem); 
}();
var mensagem;

No caso da palavra-chave var, além da variável ser içada (hoisting) ela é automaticamente inicializada com o valor undefined -indefinido, do português- (caso não seja atribuído nenhum outro valor).

O que muda quando fazemos esse tipo de implementação?

Imagine que nosso código contenha muitas linhas e que sua complexidade não seja algo tão facilmente compreensível.
Às vezes, queremos declarar variáveis que serão utilizadas apenas dentro de um pequeno trecho do nosso código. Ter que lidar com o escopo de função das variáveis declaradas com var (escopo abrangente) pode confundir a cabeça até de programadores mais experientes.

Sabendo das "complicações" que as variáveis declaradas com var podem causar, o que podemos fazer para evitá-las?

let

Foi pensando em trazer o escopo de bloco (tão conhecido em outras linguagens) que o ECMAScript 6 destinou-se a disponibilizar essa mesma flexibilidade (e uniformidade) para a linguagem.
Através da palavra-chave let podemos declarar variáveis com escopo de bloco. Dá uma olhada, Inovador:
var exibeMensagem = function() {
     if(true) { 
         var escopoFuncao = 'DIO; 
         let escopoBloco = 'Aula';

        console.log(escopoBloco); // Aula 
    } 
    console.log(escopoFuncao);  // DIO
    console.log(escopoBloco); 
}


O código acima exibe 'Aula' e 'DIO', e então dá erro. :(
Quando tentamos acessar uma variável que foi declarada através da palavra-chave let fora do seu escopo, o erro Uncaught ReferenceError: escopoBloco is not defined foi apresentado.


Sendo assim, podemos usar tranquilamente o let, pois o escopo de bloco estará garantido! 🤓


const

Embora o let garanta o escopo, ainda assim, existe a possibilidade de declararmos uma variável com let e ela ser undefined. Por exemplo:


void function(){ 
    let mensagem; 
    console.log(mensagem); // Imprime undefined 
}();


Supondo que temos uma variável que queremos garantir sua inicialização com um determinado valor, como podemos fazer isso no JavaScript sem causar uma inicialização default com undefined?
Para termos esse tipo de comportamento em uma variável no JavaScript, podemos declarar constantes por meio da palavra-chave const. Vamos dar uma olhada no exemplo:


void function(){ 
    const mensagem = 'Aula'; 
    console.log(mensagem); // Aula
    mensagem = 'DIO'; 
}();



O código acima gera um Uncaught TypeError: Assignment to constant variable, pois o comportamento fundamental de uma constante é que uma vez atribuído um valor a ela, este não pode ser alterado.
Assim como as variáveis declaradas com a palavra-chave let, constantes também tem escopo de bloco.
Além disso, constantes devem ser inicializadas obrigatoriamente no momento de sua declaração. Vejamos alguns exemplos:
// constante válida 
const idade = 18;

// constante inválida: onde está a inicialização? 
const pi;


No código acima temos o exemplo de uma constante idade sendo declarada e inicializada na mesma linha (constante válida) e um outro exemplo onde o valor não é atribuído na declaração de pi (constante inválida) ocasionando o erro Uncaught SyntaxError: Missing initializer in const declaration


É importante utilizar const para declarar nossas variáveis, porque assim conseguimos um comportamento mais previsível, já que o valor que elas recebem não podem ser alterados. Não se esqueça disso.


Graças ao hoisting, variáveis declaradas com a palavra-chave var podem ser utilizadas mesmo antes de sua declaração.
Por outro lado, as variáveis criadas com let só podem ser utilizadas após sua declaração, pois, apesar de serem elevadas, elas não são inicializadas.
Além das variáveis declaradas com var temos a possibilidade de usar constantes por meio da palavra-chave const ou utilizar variáveis com escopo de bloco através da let.


Olha este Quadro-Resumo ( ou seria meu novo papel de parede do celular?) IN-CRÍ-VEL proposto pelo site ConstLetVar :



Se te ajudei, dê um UP ^ ali do lado esquerdo (marcando como ÚTIL) pra eu saber!

Sempre posto por aqui então me siga pra gente se ajudar e chegar mais longe.
Conto contigo.

_____________________________________________

Outros artigos de minha autoria:

📌 O casamento perfeito: SASS e CSS
📌 O que um iniciante precisa saber para tornar-se um JÚNIOR
📌 PRESENTE DE FIM DE ANO: Diga algo BOM para um iniciante em programação : )
📌 O Segredo dos CONTRATADOS! (README do GitHub)


Obrigado por tudo, Inovadores!


Fontes:
https://www.alura.com.br/artigos/entenda-diferenca-entre-var-let-e-const-no-javascript

https://medium.com/collabcode/javascript-e-suas-vari%C3%A1veis-var-let-e-const-b035b44c2dab


1
56

Comentários (1)

1
Felipe

Felipe

29/12/2020 18:10

Boa thiago, excelente artigo 🦾

👨‍💻Community Support Analyst at Digital Innovation One && Oracle Academy Member| Já fui vendedor de balinha, modelo e marinheiro.🌠

Brasil