Na maioria das vezes, um aplicativo JavaScript precisa trabalhar com informações. Aqui estão dois exemplos:
Uma loja online – as informações podem incluir produtos vendidos e um carrinho de compras.
Um aplicativo de bate-papo – as informações podem incluir usuários, mensagens e muito mais.
Variáveis são usadas para armazenar essas informações.
Uma variável é um “armazenamento nomeado” para dados. Podemos usar variáveis para armazenar brindes, visitantes e outros dados.
Para criar uma variável em JavaScript, use a palavra-chave let .
A instrução abaixo cria (em outras palavras: declara ) uma variável com o nome “mensagem”:
deixe mensagem;
Agora, podemos inserir alguns dados nele usando o operador de atribuição = :
deixe mensagem; mensagem = 'Olá'; // armazena a string 'Hello' na variável chamada mensagem
A string agora é salva na área de memória associada à variável. Podemos acessá-lo usando o nome da variável:
deixe mensagem; mensagem = 'Olá!'; alerta(mensagem); //mostra o conteúdo da variável
Para ser conciso, podemos combinar a declaração e atribuição da variável em uma única linha:
deixe mensagem = 'Olá!'; //define a variável e atribui o valor alerta(mensagem); // Olá!
Também podemos declarar múltiplas variáveis em uma linha:
deixe usuário = 'John', idade = 25, mensagem = 'Olá';
Pode parecer mais curto, mas não o recomendamos. Para melhor legibilidade, use uma única linha por variável.
A variante multilinha é um pouco mais longa, mas mais fácil de ler:
deixe usuário = 'João'; deixe idade = 25; deixe mensagem = 'Olá';
Algumas pessoas também definem múltiplas variáveis neste estilo multilinha:
deixe usuário = 'John', idade = 25, mensagem = 'Olá';
…Ou mesmo no estilo “vírgula primeiro”:
deixe usuário = 'John' , idade = 25 , mensagem = 'Olá';
Tecnicamente, todas essas variantes fazem a mesma coisa. Então, é uma questão de gosto pessoal e estético.
var em vez de let
Em scripts mais antigos, você também pode encontrar outra palavra-chave: var em vez de let :
var mensagem = 'Olá';
A palavra-chave var é quase igual a let . Ele também declara uma variável, mas de uma forma “old-school” um pouco diferente.
Existem diferenças sutis entre let e var , mas elas ainda não importam para nós. Iremos abordá-los em detalhes no capítulo O antigo “var”.
Podemos facilmente compreender o conceito de “variável” se a imaginarmos como uma “caixa” de dados, com um adesivo com um nome exclusivo.
Por exemplo, a variável message pode ser imaginada como uma caixa chamada "message" com o valor "Hello!" nele:
Podemos colocar qualquer valor na caixa.
Também podemos alterá-lo quantas vezes quisermos:
deixe mensagem; mensagem = 'Olá!'; mensagem = 'Mundo!'; // valor alterado alerta(mensagem);
Quando o valor é alterado, os dados antigos são removidos da variável:
Também podemos declarar duas variáveis e copiar dados de uma para a outra.
deixe olá = 'Olá mundo!'; deixe mensagem; // copia 'Hello world' de hello para a mensagem mensagem = olá; // agora duas variáveis contêm os mesmos dados alerta(olá); // Olá, mundo! alerta(mensagem); // Olá, mundo!
Declarar duas vezes aciona um erro
Uma variável deve ser declarada apenas uma vez.
Uma declaração repetida da mesma variável é um erro:
deixe mensagem = "Isto"; // 'let' repetido leva a um erro deixe mensagem = "Isso"; // SyntaxError: 'message' já foi declarada
Portanto, devemos declarar uma variável uma vez e depois consultá-la sem let .
Linguagens funcionais
É interessante notar que existem linguagens de programação funcionais puras, como Haskell, que proíbem a alteração de valores de variáveis.
Nessas linguagens, uma vez que o valor é armazenado “na caixa”, ele fica lá para sempre. Se precisarmos armazenar algo mais, a linguagem nos obriga a criar uma nova caixa (declarar uma nova variável). Não podemos reutilizar o antigo.
Embora possa parecer um pouco estranho à primeira vista, essas linguagens são bastante capazes de um desenvolvimento sério. Mais do que isso, existem áreas como a computação paralela onde esta limitação confere certos benefícios.
Existem duas limitações nos nomes de variáveis em JavaScript:
O nome deve conter apenas letras, dígitos ou os símbolos $ e _ .
O primeiro caractere não deve ser um dígito.
Exemplos de nomes válidos:
deixe usuárioNome; deixe testar123;
Quando o nome contém várias palavras, camelCase é comumente usado. Ou seja: as palavras vão uma após a outra, cada palavra, exceto a primeira, começando com uma letra maiúscula: myVeryLongName .
O que é interessante – o cifrão '$' e o sublinhado '_' também podem ser usados em nomes. São símbolos regulares, assim como as letras, sem nenhum significado especial.
Esses nomes são válidos:
seja $ = 1; //declarou uma variável com o nome "$" seja _ = 2; // e agora uma variável com o nome "_" alerta($ + _); //3
Exemplos de nomes de variáveis incorretos:
deixe 1a; // não pode começar com um dígito deixe meu nome; // hífens '-' não são permitidos no nome
O caso é importante
Variáveis chamadas apple e APPLE são duas variáveis diferentes.
Letras não latinas são permitidas, mas não recomendadas
É possível usar qualquer idioma, incluindo letras cirílicas, logogramas chineses e assim por diante, assim:
deixe имя = '...'; deixe 我 = '...';
Tecnicamente, não há erro aqui. Esses nomes são permitidos, mas existe uma convenção internacional para usar o inglês em nomes de variáveis. Mesmo que estejamos escrevendo um roteiro pequeno, ele pode ter uma longa vida pela frente. Pessoas de outros países podem precisar lê-lo algum dia.
Nomes reservados
Existe uma lista de palavras reservadas, que não podem ser usadas como nomes de variáveis porque são usadas pela própria linguagem.
Por exemplo: let , class , return e function são reservados.
O código abaixo apresenta um erro de sintaxe:
deixemos = 5; // não é possível nomear uma variável "let", erro! deixe retornar = 5; // também não é possível nomeá-lo como "return", erro!
Uma atribuição sem use strict
Normalmente, precisamos definir uma variável antes de usá-la. Mas antigamente era tecnicamente possível criar uma variável por meio de uma mera atribuição do valor sem usar let . Isso ainda funciona agora se não use strict em nossos scripts para manter a compatibilidade com scripts antigos.
// nota: não há "use strict" neste exemplo num = 5; // a variável "num" é criada se não existisse alerta(núm); //5
Esta é uma prática ruim e causaria um erro no modo estrito:
“usar estrito”; num = 5; //erro: num não está definido
Para declarar uma variável constante (imutável), use const em vez de let :
const meuAniversário = '18.04.1982';
Variáveis declaradas usando const são chamadas de “constantes”. Eles não podem ser reatribuídos. Uma tentativa de fazer isso causaria um erro:
const meuAniversário = '18.04.1982'; meuAniversário = '01.01.2001'; // erro, não é possível reatribuir a constante!
Quando um programador tem certeza de que uma variável nunca mudará, ele pode declará-la com const para garantir e comunicar esse fato a todos.
Existe uma prática generalizada de usar constantes como apelidos para valores difíceis de lembrar que são conhecidos antes da execução.
Essas constantes são nomeadas com letras maiúsculas e sublinhados.
Por exemplo, vamos criar constantes para cores no chamado formato “web” (hexadecimal):
const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // ...quando precisamos escolher uma cor deixe cor = COLOR_ORANGE; alerta(cor); //#FF7F00
Benefícios:
COLOR_ORANGE é muito mais fácil de lembrar do que "#FF7F00" .
É muito mais fácil digitar incorretamente "#FF7F00" do que COLOR_ORANGE .
Ao ler o código, COLOR_ORANGE é muito mais significativo que #FF7F00 .
Quando devemos usar letras maiúsculas para uma constante e quando devemos nomeá-la normalmente? Vamos deixar isso claro.
Ser uma “constante” significa apenas que o valor de uma variável nunca muda. Mas algumas constantes são conhecidas antes da execução (como um valor hexadecimal para vermelho) e algumas constantes são calculadas em tempo de execução, durante a execução, mas não mudam após sua atribuição inicial.
Por exemplo:
const pageLoadTime = /* tempo que uma página leva para carregar */;
O valor de pageLoadTime não é conhecido antes do carregamento da página, por isso é nomeado normalmente. Mas ainda é uma constante porque não muda após a atribuição.
Em outras palavras, constantes com nomes maiúsculos são usadas apenas como apelidos para valores “codificados”.
Falando em variáveis, tem mais uma coisa extremamente importante.
O nome de uma variável deve ter um significado claro e óbvio, descrevendo os dados que ela armazena.
A nomenclatura de variáveis é uma das habilidades mais importantes e complexas da programação. Uma olhada nos nomes das variáveis pode revelar qual código foi escrito por um iniciante e qual código foi escrito por um desenvolvedor experiente.
Em um projeto real, a maior parte do tempo é gasta modificando e estendendo uma base de código existente, em vez de escrever algo completamente separado do zero. Quando voltamos a algum código depois de fazer outra coisa por um tempo, é muito mais fácil encontrar informações bem rotuladas. Ou, em outras palavras, quando as variáveis têm bons nomes.
Por favor, gaste algum tempo pensando no nome correto para uma variável antes de declará-la. Fazer isso irá recompensá-lo generosamente.
Algumas regras que devem ser seguidas são:
Use nomes legíveis como userName ou shoppingCart .
Fique longe de abreviações ou nomes curtos como a , b e c , a menos que você saiba o que está fazendo.
Faça nomes o mais descritivos e concisos possível. Exemplos de nomes ruins são data e value . Esses nomes não dizem nada. Não há problema em usá-los se o contexto do código tornar excepcionalmente óbvio quais dados ou valores a variável está referenciando.
Combine os termos dentro de sua equipe e em sua mente. Se um visitante do site for chamado de “usuário”, devemos nomear as variáveis relacionadas currentUser ou newUser em vez de currentVisitor ou newManInTown .
Parece simples? Na verdade é, mas criar nomes de variáveis descritivos e concisos na prática não é. Vá em frente.
Reutilizar ou criar?
E a última nota. Existem alguns programadores preguiçosos que, em vez de declarar novas variáveis, tendem a reutilizar as existentes.
Como resultado, suas variáveis são como caixas nas quais as pessoas jogam coisas diferentes sem alterar seus adesivos. O que há dentro da caixa agora? Quem sabe? Precisamos nos aproximar e verificar.
Esses programadores economizam um pouco na declaração de variáveis, mas perdem dez vezes mais na depuração.
Uma variável extra é boa, não má.
Os minificadores e navegadores JavaScript modernos otimizam o código suficientemente bem, para que não criem problemas de desempenho. Usar variáveis diferentes para valores diferentes pode até ajudar o mecanismo a otimizar seu código.
Podemos declarar variáveis para armazenar dados usando as palavras-chave var , let ou const .
let – é uma declaração de variável moderna.
var – é uma declaração de variável da velha escola. Normalmente não o usamos, mas abordaremos diferenças sutis em relação ao let no capítulo O antigo "var", caso você precise deles.
const – é como let , mas o valor da variável não pode ser alterado.
As variáveis devem ser nomeadas de uma forma que nos permita entender facilmente o que há dentro delas.
importância: 2
Declare duas variáveis: admin e name .
Atribua o valor "John" ao name .
Copie o valor de name para admin .
Mostre o valor de admin usando alert (deve gerar “John”).
No código abaixo, cada linha corresponde ao item da lista de tarefas.
deixe admin, nome; //pode declarar duas variáveis ao mesmo tempo nome = "João"; administrador = nome; alerta(administrador); // "John"
importância: 3
Crie uma variável com o nome do nosso planeta. Como você nomearia essa variável?
Crie uma variável para armazenar o nome de um visitante atual de um site. Como você nomearia essa variável?
Isso é simples:
deixe ourPlanetName = "Terra";
Observe que poderíamos usar um nome mais curto, planet , mas pode não ser óbvio a que planeta ele se refere. É bom ser mais detalhado. Pelo menos até a variável isNotTooLong.
deixe currentUserName = "John";
Novamente, poderíamos abreviar para userName se tivermos certeza de que o usuário é atual.
Editores modernos e preenchimento automático facilitam a escrita de nomes longos de variáveis. Não economize neles. Um nome com 3 palavras está bem.
E se o seu editor não tiver preenchimento automático adequado, compre um novo.
importância: 4
Examine o seguinte código:
const aniversário = '18.04.1982'; const idade = someCode(aniversário);
Aqui temos uma constante birthday para a data, e também a constante age .
A age é calculada a partir birthday usando someCode() , o que significa uma chamada de função que ainda não explicamos (falaremos em breve!), mas os detalhes não importam aqui, a questão é que age é calculada de alguma forma com base no birthday .
Seria correto usar letras maiúsculas para birthday ? Para age ? Ou mesmo para ambos?
const ANIVERSÁRIO = '18.04.1982'; // coloca o aniversário em maiúscula? const IDADE = algumCódigo(ANIVERSÁRIO); // coloca a idade em maiúscula?
Geralmente usamos letras maiúsculas para constantes “codificadas”. Ou, em outras palavras, quando o valor é conhecido antes da execução e escrito diretamente no código.
Neste código, birthday é exatamente assim. Portanto, poderíamos usar letras maiúsculas para isso.
Em contraste, age é avaliada em tempo de execução. Hoje temos uma idade, um ano depois teremos outra. É constante no sentido de que não muda durante a execução do código. Mas é um pouco “menos constante” do que birthday : é calculado, então devemos mantê-lo em minúsculas.