JavaScript: Variáveis e constantes

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 defined

Sintaxe

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 || false

Exemplo 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 defined

Exemplo 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) // 3

Para 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 defined

Exemplo 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 defined

Constantes

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 declaration

Exemplo 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) // 10

Dentro 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 = null

Sendo 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 = null

Esse 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.7

Embora 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 * desconto

Nesses casos o script será encerrado com um erro:

preco = preco * desconto
^
ReferenceError: preco is not defined

Caso 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)   // undefined

Compatibilidade

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.