[PT-BR] Variáveis no Javascript: var, let e const em cinco minutos.

Olá pessoinhas! Espero que vocês estejam bem. Já faz algum tempo que eu estou estudando Javascript, e se você tem acompanhado meus artigos, você já sabe disso. Como eu prometi pra mim mesma que deveria escrever sobre alguns tópicos antes de avançar meus estudos, vou tentar abordar da maneira mais rápida, simples e didatica possível a declaração de variáveis no Javascript, e como o título já diz, espero que este artigo seja uma leitura de no máximo cinco minutos. Vamos nessa então.

O que são variáveis?

Variáveis são espaços de memória dentro do computador que vão armazenar quaisquer tipos de valores que a gente queira guardar neles. Você pode pensar em variáveis como caixinhas com tampa transparente (essa parte da tampa é importante pra analogia), onde podemos guardar qualquer coisa dentro. Como o Javascript não trabalha com tipagem de variáveis, é bem isso que acontece mesmo.

Uma coisa muito importante, é que as variáveis não precisam ter valores fixos, sendo que é muito simples "trocar o conteudo da caixinha", ou variar seu valor. Então, vamos à criação das nossas "caixinhas"

const

A palavra-chave const serve para criar váriáveis que não variam. Ou seja, constantes. Seguindo com a analogia das caixas, é como se eu criasse a minha caixinha, colocasse algo lá dentro (como por exemplo meu nome), colocasse um cadeado nessa caixa, e jogasse a chave fora. Como a minha caixa tem uma tampa transparente eu consigo ver o que tenho dentro da caixinha (acessar seu conteúdo), mas não consigo abrir a caixinha e modificar o que está dentro dela.

Um exemplo de declaração de constante é:

const nome = "Letícia";
const idade = 20;

Logo, eu tenho o valor Letícia armazenado em uma constante chamada nome, e o valor 20 armazenado em uma constante chamada idade. Estes valores são imutáveis.

var e let

Estas duas palavras-chaves servem para criar variáveis que podem variar, ou seja, caixinhas onde podemos mexer sem nenhuma restrição no seu conteúdo.

var é uma diretiva um pouco mais antiga, e tem caído em desuso, porém ainda é funcional. Já let, é a sua substituta. Qualquer uma dessas palavras-chave pode ser utilizada para delcarar variáveis, veja o exemplo:

var nome = "Leticia";
let idade = 20;

Como no exemplo anterior, temos duas variáveis (cujos valores agora podemos alterar) chamadas nome e idade.

Qual a diferença entre var e let?

Se você acha que estas duas palavras-chave são iguais, você está enganado. Apesar de fazerem a mesma coisa, elas possuem uma diferença essêncial: o escopo onde existem.

Se você não tem muito contato com programação, vou simplificar o conceito de escopo pra você: é TUDO que está entre um { e um }.

Quando criamos uma variável com var, ela existe dentro do escopo da função onde ela foi criada. Já uma variável declarada com let, existe apenas dentro do escopo onde ela foi criada (pode ser um if, um for, ou só um { e } aleatório). Veja o código abaixo:

var bananas = 5;
let abacaxis = 5;
if(bananas <10){
   var faltamBananas = 10 - bananas;
}
if(abacaxis <10){
   let faltamAbacaxis = 10 - abacaxis;
}
console.log(`Faltam ${faltamBananas} bananas para 10 bananas
e ${faltamAbacaxis} abacaxis para 10 abacaxis.`);

Existe um problema neste código, mas vamos avaliar ele um pouco. Primeiro temos a declaração de duas variáveis, uma com let e outra com var. Essas variáveis estão disponíveis em todo o escopo do programa? Sim. Primeiro porque a variável bananas atua sobre o escopo da função, e como não temos nenhuma função especificada, ela atua no contexto global. O mesmo acontece com a variável abacaxis, já que não temos nenhum escopo especificado.

Agora é que as coisas ficam interessantes. Veja a variável faltamBananas, que está declarada dentro de uma estrutura if. Essa variável vai estar disponível para o console.log()? Sim, já que ela está declarada na mesma "função" que o if, que é o contexto global de execução.

E a variável faltamAbacaxis? Bom, ela existe somente dentro do escopo em que ela foi declarada, o escopo de um if, ou seja, entre o { e o } referentes ao if. Portanto, essa variável deixa de existir fora desse escopo. Logo, não será possível acessar essa variável no console.log().

Uma coisa interessante com relação a isso, é que podemos criar "zonas de variáveis" no nosso código usando let e criando um escopo no código (com isso eu quero dizer colocar um { e um } em algum lugar do código). Por exemplo:

let abacaxis = 3;
{
let uvas = 4;
let limoes = 8;
var laranjas = 10;
}
console.log(abacaxis,uvas,limoes,laranjas);

Lembrando: variáveis declaradas com let só existem dentro do escopo em que foram delcadaras. Esse código só será capaz de imprimir as variáveis abacaxis, porque esta variável está no mesmo escopo da função console.log() e laranjas, porque a variável laranjas está declarada com var, portanto sua existência diz respeito à função que ela se encontra, não ao escopo. Já as variáveis uvas e limoes deixam de existir assim que o escopo é fechado, e por isso não podem ser acessadas fora deste escopo.

E então, o que você achou? E o mais importante, conseguiu entender esses conceitos em cinco minutos? hahaha. Espero poder ter ajudado, e até a próxima!

Comments

[Eduardo Klosowski]

Eu não posso dizer se consegui entender os conceitos por já conhece-los, mas está bem descrito.

Uma coisa a acrescentar é que é possível usar variáveis sem usar var, let ou const, que nesse caso seriam criadas no escopo global, como:

function teste() {
    a = 10;
    console.log(b);
    if (a > 5) {
        var b = 20;
    }
}

teste();
console.log(a);

Onde o código a cima imprime 10 no console.log da variável a, e para evitar problemas, é importando usar var, let ou const.

Outra coisa interessante a olhar é o console.log da variável b, que em vez de dar ReferenceError, pela variável não ter sido declarada ainda, o js executa primeiro a instrução para criar a variável, e só depois executa o código da função, algo como:

function teste() {
    var b;
    a = 10;
    console.log(b);
    if (a > 5) {
        b = 20;
    }
}

E por esse motivo é impresso undefined nesse caso.

Ainda nesse assunto, existem as closures que trabalham com os escopos para criar variáveis que não podem mais ser sobrescritas, mesmo elas não sendo constantes.

[Chukwudi Nweze]

Gggf