Como declarar variáveis ​​em JavaScript

Trabalhar com variáveis ​​é uma das primeiras coisas que você aprende como programador de JavaScript. JavaScript é amplamente usado no desenvolvimento da web, por isso é importante construir uma boa base de conhecimento.

Declarar uma variável em JavaScript é fácil porque é uma linguagem amigável ao desenvolvedor. O desafio vem com as palavras-chave usadas para criar variáveis. Existem três dessas palavras-chave e cada uma fornecerá um resultado diferente.

Se você conhece todas as três maneiras de declarar uma variável, pode tomar as decisões certas para seu aplicativo. Vamos examinar essas três palavras-chave, como funcionam e quando são usadas.

Três Maneiras De Declarar Uma Variável JavaScript

Existem três palavras-chave usadas para declarar uma variável em JavaScript:

• var
• let
• const

É fácil codificar uma variável em JavaScript. Por exemplo, aqui está como fazer isso usando a palavra-chave var :

var myVariable = 15;

Esses novos métodos foram estabelecidos com JavaScript ES6 . Antes de aprender como eles funcionam, é útil ter um conhecimento prévio de alguns termos de programação comuns.

Termos Chave

Scope

O escopo da variável é quais partes do seu programa podem ver a variável. Algumas variáveis ​​terão escopo limitado, outras estão disponíveis para todo o seu programa. Variáveis ​​que estão disponíveis para todo o seu programa têm um escopo global .

Você precisa saber sobre as regras de escopo. Conforme os programas ficam maiores, você usa mais variáveis. Perder o controle do escopo pode levar a erros em seus programas.

Block

As funções criadas em JavaScript usam chaves. O código entre as chaves é conhecido como bloco e você pode aninhar quantos blocos desejar dentro de uma função.

Saber sobre os blocos de código é a chave para entender como cada tipo de variável funciona. Aqui está um exemplo visual de blocos usando uma função JavaScript .

function blockTest(){
//This is a block
     {
       //This is a nested block
     }
};

Com isso em mente, vamos aprender sobre as variáveis ​​JavaScript!

1. Variável JavaScript: Var

Quando você declara uma variável com var , o escopo da variável é:

• Se declarado dentro de uma função: a função envolvente
• Se declarado fora de uma função: escopo global

Esta é uma declaração de variável básica com var . Existem alguns comentários no código para ajudar a guiá-lo por meio dessas definições.

var test = 5; //Variable declaration
function varTest(){ 
console.log(test); //This prints the variable
};
varTest();
>> 5

Neste exemplo, a variável test foi declarada com var  e atribuída ao valor 5. A função varTest () imprime a variável no console. A saída da função é 5.

A variável foi declarada fora da função, portanto, tem um escopo global. Mesmo que o teste de variável não tenha sido declarado dentro da função, ele funciona muito bem.

Se você alterar a variável dentro da função, o programa produz um resultado diferente.

var test = 5; 
function varTest(){ 
var test = 10;
console.log(test); 
};
varTest();
>> 10

A função atualizada declara um teste de variável dentro da função, e o console lê o novo valor (10). A variável foi declarada dentro de uma função, portanto, o escopo do bloco substitui o escopo global.

Se você imprimir a variável por si só, sem executar a função:

console.log(test);
>> 5

Você obtém o resultado da variável global.

2. Variável JavaScript: Let

Usar let para declarar variáveis ​​fornece a elas um escopo mais específico. Variáveis ​​declaradas usando let têm como escopo o bloco em que são declaradas.

Esta é uma função com vários blocos e ajudará a mostrar a diferença entre var e let .

Aqui está uma função que usa var dentro de vários blocos. Dê uma olhada no código e veja se você consegue descobrir o que está acontecendo.

function varTest(){
var test = 5;
     {
       var test = 10;
       console.log(test);
     }
console.log(test);
};

varTest();
>> 10
>> 10

Ambas as saídas são 10.

As variáveis ​​declaradas com var estão disponíveis para toda a função. A variável teste foi declarada como 5 no primeiro bloco. No segundo bloco, a variável foi alterada para 10.

Isso mudou a variável de toda a função. No momento em que o programa chega ao segundo console.log (), a variável foi alterada.

Aqui está o mesmo exemplo com comentários para seguir a variável:

function varTest(){
var test = 5; // Variable created
     {
       var test = 10; //Variable changed, 5 is overriden
       console.log(test); // 10
     }
console.log(test); // 10, The variable is now 10 for the entire function
};

Aqui está o mesmo exemplo com let , observe o que acontece dentro dos blocos.

function letTest(){
let test = 5;
     {
       let test = 10;
       console.log(test);
     }
console.log(test);
};

letTest();
>> 10
>> 5

O resultado mudou. Aqui está o mesmo código com comentários. Vamos chamar o primeiro bloco de “Bloco A” e o segundo de “Bloco B”.

function letTest(){
let test = 5; // Variable created in Block A
     {
       let test = 10; // Variable created in Block B, this is a new variable
       console.log(test); // Prints 10
     }
console.log(test); // Prints 5, since we're back to Block A
};

letTest();
>> 10
>> 5

3. Variável JavaScript: Const

Usar  const  para declarar uma variável tem escopo de bloco assim como let .

Quando você usa const para declarar uma variável, o valor não pode ser reatribuído. A variável também não pode ser declarada novamente. Isso deve ser reservado para variáveis ​​importantes em seu programa que nunca mudam.

Pense em const como uma abreviação de constante. É permanente e não muda. Se você está vindo de outra linguagem de programação como Java, pode já estar familiarizado com este conceito.

Vamos declarar uma variável const e experimentar.

const permanent = 10;

Agora, vamos tentar fazer algumas alterações na variável e ver o que acontece. Experimente e altere o valor da variável:

const permanent = 20;
>> Uncaught SyntaxError: Identifier 'permanent' has already been declared

O valor não pode ser alterado, o JavaScript gera um erro no console. Sejamos inteligentes e tentemos usar uma nova palavra-chave variável para alterar o valor:

let permanent = 20;
>> Uncaught SyntaxError: Identifier 'permanent' has already been declared

Ainda assim, sem sorte ao mudar a variável. Que tal o mesmo valor, com uma nova palavra-chave?

let permanent = 10;
>> Uncaught SyntaxError: Identifier 'permanent' has already been declared

Isso ainda não funciona. Mesmo que o valor seja o mesmo, tentar alterar a palavra-chave gerará um erro.

Isso é tudo que há para usar a palavra-chave const . Salve-o para as variáveis ​​especiais que você precisa proteger no programa.

Tornando-Se Um Especialista Em JavaScript

Este tutorial detalhou as três palavras-chave usadas para declarar variáveis ​​JavaScript. Você verá todos esses três tipos ao longo de sua carreira de desenvolvimento da web, por isso é importante se familiarizar.

Há muito mais para aprender. Aprender o que é JavaScript e como ele funciona irá prepará-lo para o desenvolvimento moderno da web. Agora que você está familiarizado com as variáveis, aprenda mais sobre como o JavaScript interage com o Document Object Model e experimente um projeto prático .