Variáveis e valores

docs.scrimba.com

Digamos que você está construindo uma página de checkout e o preço de um item aparece em três lugares: a linha do produto, o total corrente e a confirmação. Digite 19.99 em todos os três manualmente e uma venda vira uma tarde de encontrar-e-substituir. Armazene uma vez com um nome e mude em um lugar, e cada lugar que o usa se atualiza com você. Esse nome é uma variável, e este capítulo é sobre como criar uma, quando bloqueá-la e como chamá-la.

Armazenando um valor

Uma variável é um nome que você dá a um valor para poder usá-lo novamente depois. Você cria uma com a palavra let, depois um nome, depois =, depois o valor que deseja armazenar:

let userName = "Maria";
console.log(userName); // Maria

Essa linha diz: pegue o texto "Maria" e lembre-se dele com o nome userName. A partir de então, sempre que você escrever userName, JavaScript devolve o que você armazenou.

Leia o = como "coloque este valor com este nome". Não é o sinal de igual da aula de matemática, onde os dois lados já são iguais. É uma instrução: pegue o valor à direita e guarde-o com o nome à esquerda.

Como é uma instrução de armazenamento, você pode mudar de ideia depois. Escreva o nome e = novamente com um novo valor, e JavaScript mantém o mais novo:

let score = 0;
score = 10;
console.log(score); // 10

A primeira linha cria score e coloca 0 nela. A segunda dá um novo valor. Não há segundo let, porque score já existe; você está atualizando-a, não criando-a novamente.

Uma variável é um nome ligado a um valor. Você a declara com let e define seu valor com o operador de atribuição =:

let total = 0;
total = 42;
console.log(total); // 42

O = é atribuição, não comparação. Ele avalia a expressão à direita e então armazena o resultado com o nome à esquerda. É por isso que = significa "atribua este valor", nunca "é igual a"; a comparação que você vai conhecer em operadores é um símbolo separado, ===.

Declarar com let cria o nome; atribuir a ele novamente atualiza o valor que ele contém. Você só usa let uma vez por variável. Depois disso, o nome simples à esquerda é suficiente:

let itemPrice = 19.99;
itemPrice = 24.99;
console.log(itemPrice); // 24.99

O valor à direita pode ser qualquer um dos tipos de dados que JavaScript tem: texto, um número, um booleano. A variável não se importa; ela contém tudo que você atribuiu por último.

Uma variável é um identificador (um nome no seu código) ligado a um valor. O = é o operador de atribuição: ele avalia a expressão do lado direito e liga o resultado ao nome do lado esquerdo. Ele nunca testa igualdade e nunca copia um valor em uma caixa fixa; ele aponta um nome para um valor.

let total = 0;
total = 42;
console.log(total); // 42

Reatribuição não cria uma nova variável, ela reaponta a ligação existente. Essa distinção permanece invisível com primitivos como números e strings, onde cada valor é separado e independente. Ela começa a importar assim que uma variável contém algo compartilhado, como um objeto, porque então dois nomes podem apontar para o mesmo valor e uma mudança por um aparece pelo outro. Você verá isso em detalhes quando os objetos chegarem; por enquanto, tenha em mente que um nome aponta para um valor em vez de contê-lo.

Uma coisa mais que o = não faz: não bloqueia o valor no lugar. let score = 0 diz "aponte score para 0 por enquanto", e a próxima linha é livre para apontá-lo para outro lugar. Se uma ligação pode ser reapontada ou não é a diferença entre let e const, que vem a seguir.

JunoArmazenando um valor Uma variável é um nome para um valor que você quer reutilizar, e você cria uma com let name = value. Leia o = como "coloque este valor com este nome", não como o igual da aula de matemática. Para mudar depois, escreva o nome e = novamente sem um segundo let, e JavaScript mantém o novo valor.

JunoArmazenando um valor Declarar com let cria um nome; atribuir com = armazena um valor com ele. O = é atribuição, não comparação, então nunca significa "é igual a". Você só escreve let uma vez por variável; depois disso o nome simples atualiza o valor que ele contém.

JunoArmazenando um valor O = liga um nome a um valor, ele nunca copia em uma caixa ou testa igualdade. Reatribuição reaponta a ligação existente em vez de criar uma nova variável. Isso permanece invisível com números e strings e começa a causar problemas assim que um nome aponta para algo compartilhado, então mantenha "o nome aponta para o valor" em mente antes dos objetos aparecerem.

let vs const

Há duas palavras para criar uma variável: let e const. Você viu let. Use const quando o valor não deve nunca mudar depois que você o definir:

const taxRate = 0.2;
console.log(taxRate); // 0.2

Uma alíquota de imposto é fixa, então const se encaixa: ele diz "isso está definido, e não quero que mude por acidente". Se você tentar reatribuir uma const, JavaScript o detém com um erro, que é uma proteção útil.

Alcance const primeiro. Use let apenas quando você sabe que o valor vai mudar, como uma pontuação que sobe ou um total que você adiciona. Se um valor permanece igual por toda a sua vida, const diz isso e o protege.

const currency = "USD";
let itemsInCart = 0;
itemsInCart = 3;
console.log(itemsInCart); // 3

A moeda não vai mudar, então é const. A contagem do carrinho vai, então é let.

JavaScript oferece duas formas de declarar uma variável, e a escolha é sobre se o valor será reatribuído. const declara uma ligação constante: uma vez que você a atribui, não pode apontar esse nome para um novo valor.

const taxRate = 0.2;
taxRate = 0.25; // TypeError: Assignment to constant variable.

let permite reatribuição; const a proíbe. A regra que mantém o código limpo é alcançar const por padrão, e usar let apenas quando você precisa reatribuir. A maioria das variáveis é definida uma vez e lida muitas vezes, então a maioria delas deve ser const.

const currency = "USD";
let runningTotal = 0;
runningTotal = 19.99;
console.log(runningTotal); // 19.99

const não é sobre o valor ser especial; é um sinal para quem quer que esteja lendo o código, incluindo você semana que vem, que esse nome não vai se mover. Esse sinal torna um programa mais fácil de seguir, porque um const você pode confiar que fica no lugar.

Ambos let e const declaram uma ligação (o vínculo entre um nome e um valor). A diferença é se essa ligação pode ser reatribuída. const congela a ligação: depois da atribuição inicial, apontar o nome para um novo valor é um TypeError.

const taxRate = 0.2;
taxRate = 0.25; // TypeError: Assignment to constant variable.

Use const por padrão e caia para let apenas onde a reatribuição é real. Isso não é frescura estilística; um const é um fato que você pode confiar ao ler, um nome a menos que pode mudar por você, e isso estreita onde um bug pode viver.

A sutileza que vale a pena declarar cedo: const congela a ligação, não o conteúdo. Ele o detém de reapontar o nome, mas se o valor é algo com partes internas, essas partes ainda podem mudar. Um número ou uma string não tem partes internas para mudar, então com esses const se comporta exatamente como "este valor é fixo". Com um objeto, porém, const apenas garante que o nome continue apontando para o mesmo objeto; o próprio conteúdo do objeto continua editável. Essa lacuna surpreende as pessoas, e é mais fácil de absorver agora do que em meio a uma depuração, então os objetos voltam a isso diretamente.

const currency = "USD";
let runningTotal = 0;
runningTotal = 19.99;
console.log(runningTotal); // 19.99

Há uma terceira palavra-chave, mais antiga, que você vai conhecer em código existente: var. Não a use. Ela difere de let de duas formas que causam bugs. Primeiro, var é function-scoped: ela ignora os blocos { } que let e const respeitam, então um var declarado dentro de um bloco vaza para toda a função circundante, enquanto let e const são block-scoped e permanecem dentro do { } mais próximo. Segundo, var é hoisted: a declaração é tratada como se tivesse se movido para o topo do seu escopo, então um nome var existe (contendo undefined) antes da linha que a declara, o que esconde erros em vez de capturá-los.

let e const também são hoisted, mas alcançá-los antes da linha de declaração lança um erro em vez de silenciosamente dar undefined; essa janela inicial é chamada de temporal dead zone, e o erro que produz é uma feature, já que transforma um bug silencioso em um ruidoso. A versão curta: escreva const por padrão, let quando você precisa reatribuir, e trate var como conhecimento somente leitura para manter código antigo.

Junolet vs const Use const para um valor que nunca deve mudar, e let para um que vai. Alcance const primeiro, e mude para let apenas quando você sabe que o valor precisa mudar. Reatribuir um const dá a você um erro, que é a proteção fazendo seu trabalho.

Junolet vs constconst proíbe reatribuição; let permite. Use const por padrão e alcance let apenas quando um valor tem que mudar. Um const diz ao próximo leitor que esse nome não vai se mover, e a maioria das variáveis é definida uma vez e lida muitas vezes, então a maioria delas deve ser const.

Junolet vs constconst congela a ligação, não o conteúdo, então reatribuir o nome é um TypeError mas um objeto que ele aponta pode ainda ser editado. Use const por padrão, use let apenas para reatribuição real, e trate a antiga var como conhecimento somente leitura, já que é function-scoped e hoisted de formas que escondem bugs. A lacuna ligação-versus-conteúdo pega as pessoas, então mantenha em mente para quando os objetos chegarem.

Nomeando variáveis

Um nome de variável tem algumas regras. Pode usar letras, dígitos, _ e $, mas não pode começar com um dígito e não pode conter espaços:

let firstName = "Maria";
let item2 = "livro";

Nomes são sensíveis a maiúsculas, o que significa que firstName e firstname são duas variáveis diferentes. Acertar as maiúsculas erradas é um erro comum no início, então ajuda manter nomes consistentes.

O estilo que desenvolvedores JavaScript usam é chamado camelCase: comece em minúsculas e capitalize a primeira letra de cada palavra seguinte, sem espaços. Então firstName, itemPrice, isLoggedIn.

let itemPrice = 19.99;
let isLoggedIn = true;

Além das regras, aponte para nomes que digam o que contêm. price vence p, e userName vence x. Você vai ler seu código muito mais do que vai escrever, e nomes claros são o que o tornam legível.

As regras para um nome válido: pode conter letras, dígitos, _ e $, não pode começar com um dígito e não pode incluir espaços ou palavras reservadas como let. Nomes são sensíveis a maiúsculas, então total e Total são variáveis separadas.

Dentro dessas regras, a convenção é camelCase: primeira palavra em minúsculas, cada palavra seguinte capitalizada, sem separadores.

let firstName = "Maria";
let itemPrice = 19.99;
let isLoggedIn = true;

Convenção não é imposta pela linguagem, mas é imposta por todas as bases de código que você vai trabalhar, então siga desde o início. Um booleano geralmente lê bem com um prefixo is ou has (isLoggedIn, hasDiscount), que sinaliza à primeira vista que o valor é verdadeiro ou falso.

O nome é documentação. daysUntilExpiry diz ao próximo leitor o que o valor significa; d o faz ir procurando. Nomes descritivos custam alguns toques de tecla e economizam tempo real, então gaste-os.

As regras léxicas: um identificador válido (um nome no código) pode conter letras, dígitos, _ e $, não pode começar com um dígito e não pode ser uma palavra reservada (let, const, return e semelhantes). Identificadores são sensíveis a maiúsculas, então total e Total são distintos.

A convenção em camadas é camelCase para variáveis, e vale a pena tratar como inegociável mesmo que a linguagem não a imponha. Ferramentas, colegas de equipe e todos os guias de estilo populares assumem isso, então desviar adiciona atrito sem ganho.

const firstName = "Maria";
const itemPrice = 19.99;
const isLoggedIn = true;

O hábito de valor mais alto é nomear por significado. Um nome é a documentação mais barata que você tem e a que mais provavelmente permanecerá precisa, porque fica no valor que descreve. remainingCredits sobrevive a um refatoramento que um comentário dizendo "créditos restantes" pode não. Booleanos leem melhor como uma pergunta sim/não (isActive, hasAccess), e evite nomes que mentem depois de uma mudança, como um const total que você continua adicionando conceitualmente; se o significado muda, renomeie. A nomenclatura clara é o hábito de maior alavancagem neste capítulo, e é gratuito.

JunoNomeando variáveis Um nome pode usar letras, dígitos, _ e $, mas não pode começar com um dígito ou conter espaços. Nomes são sensíveis a maiúsculas, então firstName e firstname são diferentes. Use camelCase como itemPrice, e escolha nomes que digam o que contêm, então price em vez de p.

JunoNomeando variáveis Nomes válidos usam letras, dígitos, _ e $, nunca começam com um dígito e são sensíveis a maiúsculas. A convenção é camelCase, e embora a linguagem não a imponha, toda base de código o faz, então siga desde o primeiro dia. Um nome descritivo é documentação que permanece precisa, então gaste os toques de tecla em daysUntilExpiry em vez de d.

JunoNomeando variáveis Identificadores permitem letras, dígitos, _ e $, não podem começar com um dígito, não podem ser palavras reservadas e são sensíveis a maiúsculas. Use camelCase; a linguagem não o impõe mas todas as ferramentas e colegas de equipe assumem. Nomear por significado é o hábito de maior alavancagem aqui, e não custa nada, então faça remainingCredits o padrão em vez de r.

Para onde as variáveis vão daqui

Variáveis são a fundação em que tudo mais se assenta: um valor não é útil até ter um nome pelo qual você possa alcançá-lo. Você agora tem os três movimentos que importam, armazenar um valor com let, travar um com const e nomeá-lo bem, e você usará todos os três em cada programa que escrever daqui em diante.

A seguir você vai olhar os próprios valores em tipos de dados: o texto, números e booleanos que você vem armazenando, e o que torna cada um se comportar do jeito que faz. Depois disso, operadores mostram como combinar esses valores, e funções deixam você nomear um pedaço de trabalho do jeito que uma variável nomeia um valor.