Começando no mundo JavaScript — Variáveis e seus escopos

Foto de Pixabay no Pexels

Variáveis

As variáveis são espaços de memória onde armazenam dados, podendo ser definidos, atualizados, recuperados quando necessário. Para declarar uma variável podemos utilizar uma palavra-chave var, let ou const seguida por quase qualquer nome que deseja chama-lá.

Obs.: Em JavaScript existem algumas palavras reservadas que não podem ser utilizadas para nomear uma variável, confirar neste link se sua variável tem um nome válido.

Antes de mostrar-te um exemplo de declaração de variável, vamos primeiro entender os tipos de váriaveis:

• boolean (booleano);
• number (número);
• string (texto);
• function (função);
• object (objeto);
• array;
• undefined (indefinido);
• null (nulo);

https://medium.com/hurb-labs/comecando-no-mundo-javascript-variaveis-e-seus-escopos-e-operadores-730cd0a0a399

Obs.: Como o JavaScript não é fortemente tipado. Isso significa que podemos declarar uma variável, como número e posteriormente atualizá-la com uma string ou outro tipo de dado. Esse tipo de operação não é considerado uma boa prática.Teste o exemplo acima no console do seu navegador. Terá um saída assim:

Resultado do código variaveis-tipo.js

• {1} Declaramos um booleano, para o JavaScript utilizar a palavra reservada var não é obrigatório, porém sua utilização é boa prática;
• {2} Declaramos um número;
• {3} Declaramos um número também, porém um float, ou seja, um número decimal de ponto flutuante;
• {4} Declaramos um string;
• {5} Declaramos um valor null, ou seja, sem valor;
• {6} Declaramos um undefined, é diferente de null. Undefined significa uma variável declarada, mas não recebeu nenhum;
• {7} Declaramos um array com 4 posições e cada posição contendo um número;
• {8} Declaramos um objeto com um atributo nome com uma string como valor;
• {9} A variável meuNome atualizada com a string “Não é Johnny”;
• {10} A variável num atualizada com o número 2;
• {11} A variável numFloat atualizada com o float 2.5;

Obs.: Como o JavaScript não é fortemente tipado. Isso significa que podemos declarar uma variável, como número e posteriormente atualizá-la com uma string ou outro tipo de dado. Esse tipo de operação não é considerado uma boa prática.

Entendi… Mas você não falou qual é a diferença entre var, let ou const?

Calma, meu amigo… Irei explicar na próxima seção.

Foto de Sound On no Pexels

Tipo de declarações de variáveis

Resultado do código variavel-tipo-2.js

• {1} A variável variavelVar é instanciada com valor var instanciada;
• {2} A variável variavelLet é instanciada com valor let instanciada;
• {3} A variável variavelConst é instanciada com valor const instanciada;
• {4} A variável variavelVar é instanciada novamente com valor var instanciada de novo;
• {5} Se a linha não estivesse comentada, o compilador daria esse erro “SyntaxError: Identifier ‘variavelLet’ has already been declared.”, pararia o código neste ponto, ou seja, uma variável do tipo let só pode se declarada uma única vez;
• {6} O mesmo ocorre nesta linha, o erro “SyntaxError: Identifier ‘variavelConst’ has already been declared.” é notificado pelo compilador e código não segue para a próxima linha ou seja, uma variável do tipo const só pode se declarada uma única vez;
• {7} A variável variavelVar recebe o valor var outro valor;
• {8} A variável variavelLet recebe o valor let outro valor;
• {9} Se a linha não estivesse comentada, o compilador daria esse erro “TypeError: Assignment to constant variable.”, pararia o código neste ponto, ou seja, uma variável do tipo const só pode ter um valor atribuído a ela quando ela é declarada.

Escopo de variáveis

Basicamente, o escopo é o local em que podemos acessar a variável no algoritmo. Podemos ter variáveis locais ou globais.

Resultado do código variavel-escopo.js

• {1} O log exibirá minhaVariavel => global porque acessamos a variável global minhaVariavel;
• {2} O log exibirá minhaFuncao() => local porque declaramos a variável local minhaVariavel dentro da função minhaFuncao então o espoco está apenas no interior de minhaFuncao;
• {3} O log exibirá outraVariavel => global porque acessamos a variável global outraVariavel;
• {4} O log exibirá outraFuncao() => local porque acessamos a variável global outraVariavel e atribuímos o valor local pois não declaramos outraVariavel usando a palavra reservada var dentro da outraFuncao;
• {5} O log exibirá outraVariavel => local porque acessamos a variável global outraVariavel, pois o valor da variável foi alterado pela função outraFuncao;

Obs.: Um número elevado de variáveis e funções globais é ruim para a qualidade do código, sempre que possível evite variáveis globais.

Você pode acessar o repositório deste artigo neste link.

Obrigado pela sua leitura

Foto de Maksim Goncharenok no Pexels

Nos encontramos no próximo artigo, vamos conversar sobre operadores.

Referências Bibligráficas:

• MDN Web docs
• Livro Estruturas de dados e algoritmos com JavaScript — Groner, L