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

Engine Vers�o Minima

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.

JavaScript: Vari�veis e constantes

Em JavaScript podemos declarar variáveis de duas formas atualmente, com let ou var, sendo let a forma recomendada. Aprenda a diferença entre essas formas neste artigo.

Vis�o geral

Sintaxe

Na pr�tica

Exemplo 1

Exemplo 2

Exemplo 3

Exemplo 4

Exemplo 5

Constantes

Sintaxe

Na pr�tica

Exemplo 1

Exemplo 2

Exemplo 3

Exemplo 4

Exemplo 5

undefined

Compatibilidade

Artigos relacionados