Em JavaScript podemos declarar variáveis de duas formas atualmente, com let ou var, sendo let a forma recomendada. let permite declarar variáveis que existem apenas no escopo no qual desejamos utilizá-las. Esse comportamento é diferente quando utilizamos var, que cria variáveis globais e que podem ser acessadas em qualquer local no arquivo ou função onde foram declaradas.
Visão geral
É importante saber diferenciar entre o comportamento de let e var, do contrário erros difíceis de serem rastreados podem acontecer. Supondo que desejamos incluir em um script o cálculo da média de preços de alguns produtos, dada uma determinada condição. Considere que ao fazer isso o programador nomeie e variável media dentro do if como total por engano, assim como no código abaixo.
var precos = [ 1200.8, 345.8, 2543.98 ];
var total = // Total dos valores produtos no array precos
...
var incluirMedia = true;
...
if(incluirMedia) {
var total = total/precos.length;
// Continuo a lógica
}Uma vez que declaramos ambas as variáveis com var, tendo elas o mesmo identificador, total, a lógica de execução do script estará errada porque para o interpretador ambas são as mesma variável. Dessa forma, o valor atribuído à variável total utilizada dentro do if sobrescreverá aquele dado a ela em sua declaração, algumas linhas acima.
Ao substituirmos a palavra reservada var por let dentro do if, total será considerada uma nova variável, impedindo que o valor atribuído à variável total declarada acima seja sobrescrito. Nesse novo cenário teremos um erro de execução, protegendo o programa de falhar silenciosamente:
let total = total/precos.length;
^
ReferenceError: total is not definedSintaxe
let | var [ identificador ] [ = valor | expressão ]- identificador: nome da variável
- valor: valor inicial da variável, que pode ser o resultado de uma expressão (opcional)
Na prática
Exemplo 1
Variáveis podem armazenar diferentes tipos de valores como textos ou números:
let tipoNumber = 12
let tipoString1 = 'Texto entre aspas simples'
let tipoString2 = "Texto entre aspas duplas"
let tipoNull = null
let tipoUndefined = undefined
let tipoObject = { nome : 'José da Silva', idade : 18 }
let tipoBoolean = true || falseExemplo 2
É possível atribuir a uma variável o resultado de uma expressão:
let totalBruto = 5000
let desconto = 0.1
let totalLiquido = totalBruto - (totalBruto * desconto)No código acima, uma vez que utilizamos parênteses, primeiro será calculada a multiplicação e, em seguida, a subtração. Após, a variável totalLiquido será iniciada com o resultado da operação matemática.
Exemplo 3
As variáveis declaradas com let dentro de blocos if ou for não podem ser acessadas de fora destes blocos.
let admin = true
if(admin) {
let menu = [ "home", "contato", "settings" ]
}
if(menu.includes("settings")) {
// Alguma logica
}Caso isso aconteça o script será encerrado com o erro abaixo:
if(menu.includes("settings")) {
^
ReferenceError: menu is not definedExemplo 4
Quando usamos var para declarar a variável usada como índice em um for a mesma permanece acessível, mesmo após o encerramento deste laço de repetição.
for(var i = 0; i < precos.length; i++) {
total += precos[i]
}
media = total / precos.length
console.log(i) // 3Para corrigir esse código devemos utilizar o let no for para evitar que variáveis criadas para a sua execução sejam acessíveis fora de seu escopo:
for(let i = 0; i < precos.length; i++) {
total += precos[i]
}
media = total / precos.length
console.log(i) // ReferenceError: i is not definedExemplo 5
O JavaScript move declarações para o topo do código por padrão. Isso permite, em alguns casos, usar uma variável antes dela ser declarada. Esse comportamento padrão da linguagem é chamado Hoisting.
Contudo, quando declaramos uma variável com let ela não é movida para o topo do código:
function cpfIsValido (value) {
return /^\d\.\d\.\d\-\d$/.test(value)
}
console.log(cpfIsValido(cpfComVar))
console.log(cpfIsValido(cpfComLet))
var cpfComVar = '999.999.999-99'
let cpfComLet = '999.999.999-99'Dado que a variável cpfComLet é utilizada na linha 6 antes da sua declaração na linha 9 o script será encerrado com um erro:
console.log(cpfIsValido(cpfComLet)) // 'value' was used before it was defined.
^
ReferenceError: cpfComLet is not definedConstantes
O valor de uma constante não pode ser modificado. No JavaScript declaramos constantes com a palavra reservada const. Uma constante se comporta em relação ao escopo onde foi declarada da mesma forma que uma variável declarada com let.
Sintaxe
const [ identificador ] = [ valor | expressão ]- identificador: nome da constante
- valor: valor inicial que pode ser o resultado de uma expressão (opcional)
Na prática
Exemplo 1
Podemos atribuir a uma constante o resultado de uma expressão:
const peso = 80.5
const altura = 1.80
const imc = peso / (altura * altura)
console.log(imc)É comum usarmos constantes para evitar que um valor seja sobrescrito ao longo do código.
Exemplo 2
Constantes são muito utilizadas para criar funções em conjunto da sintaxe das funções em flecha:
const desconto = (preco, aliquota) => preco * aliquota
desconto(560.56, 0.08)Criamos aqui uma função chamada desconto que retorna o cálculo do preço vezes a alíquota informada como parâmetro.
Exemplo 3
Uma constante declarada sem ser iniciada com um valor gera um erro de sintaxe:
const aliquota
console.log(aliquota)(function (exports, require, module, __filename, __dirname) { const aliquota
^^^^^^^^
SyntaxError: Missing initializer in const declarationExemplo 4
Assim como quando utilizamos let, uma constante está limitada ao escopo em que foi declarada:
const quantidade = 10
if (quantidade >= 3) {
const quantidade = 20
console.log(quantidade) // 20
}
console.log(quantidade) // 10Dentro do if a constante quantidade é tratada como uma nova declaração e o valor atribuído a ela poderá ser acessado apenas dentro desse bloco.
Exemplo 5
Um objeto declarado como constante não pode ser sobrescrito:
const produto = { id : 1, nome : 'Grampo', preco : 34.7 }
produto = nullSendo este o caso, o script será encerrado com um erro:
produto = null
^
TypeError: Assignment to constant variable.Contudo, os atributos de um objeto declarado como constante podem ser sobrescritos.
const produto = { id : 1, nome : 'Grampo', preco : 34.7 }
produto.preco = nullEsse comportamento pode não ser desejado. Nesse caso podemos utilizar a função Object.freeze() para evitar que os atributos de um objeto sejam reescritos:
const produto = { id : 1, nome : 'Grampo', preco : 34.7 }
const produtoFreeze = Object.freeze(produto)
produtoFreeze.preco = null
console.log(produtoFreeze.preco) // 34.7Embora o código acima não chegue a falhar o valor do atributo preco em produtoFreeze permanecerá o mesmo, após a linha 6.
undefined
Uma variável, constante ou função é undefined quando ela ainda não foi declarada. Quando uma variável é utilizada sem que tenha sido declarada o script é encerrado com um erro:
let desconto = 0.1
preco = preco * descontoNesses casos o script será encerrado com um erro:
preco = preco * desconto
^
ReferenceError: preco is not definedCaso tenhamos declarado uma variável ou constante sem atribuir a ela um valor o script será encerrado com um erro:
var preco
let desconto
console.log(preco) // undefined
console.log(desconto) // undefinedCompatibilidade
| Node.JS ( V8) | 6.4.0 |
| Safari ( WebKit) | 11.1 |
| Chrome ( V8) | 68 |
| Microsoft Edge ( ChakraCore) | 17 |
| Firefox ( Gecko) | 61 |
Nota: O Opera utiliza atualmente grande parte do código do Chrome como base para o seu próprio desenvolvimento e por isso ele não é mencionado nesta listagem.
