Olá, caro aluno!

Você já viu em aulas anteriores que na programação nós usamos variáveis para armazenar valores, e elas são referenciadas e manipuladas a partir de seus nomes, assim como fazemos em uma expressão matemática, por exemplo. No entanto, existe um outro conceito que também pode ser usado para armazenar valores, são as chamadas constantes. Assim como as variáveis, elas também podem ser referenciadas a partir de seus nomes. A diferença entre esses dois conceitos é que as constantes não podem ter seus valores alterados.

Nesta videoaula, você aprenderá detalhes sobre a declaração e a utilização das variáveis e constantes em JavaScript. Além disso, no final desta aula, você verá também alguns tipos especiais de atribuições JavaScript.

Vamos nessa?!

Identificadores JavaScript

Nas aulas anteriores, nós já fizemos declarações de diversas variáveis e as utilizamos em nossos programas JavaScript. Vimos que as variáveis são usadas para permitir que o programa “lembre-se” de determinados valores. Neste exemplo do slide (Figura 1), a variável saldo é usada para lembrar do saldo atual e a variável credito é usada para lembrar do valor a ser creditado.

Essas variáveis são usadas, na terceira linha, quando guardamos na variável saldo o resultado da soma do saldo atual com o credito. Podemos entender variáveis como uma “memória de curto prazo”, pois esses valores são perdidos pelo navegador quando você sai da página HTML.

Assim como as variáveis saldo e credito, todas as variáveis devem ser identificadas com nomes, os quais devem ser exclusivos. Ou seja, não existirão duas variáveis com o mesmo nome.

Por esse motivo, chamamos os nomes das variáveis de identificadores (Figura 2).

Os identificadores JavaScript podem ter apenas uma letra, como, por exemplo, x ou y, ou podem ter várias letras formando uma palavra que descreva melhor o seu conteúdo, como, por exemplo, total ou valorTotal (Figura 3). É importante reforçar o que já dissemos antes: JavaScript diferencia letras minúsculas de letras maiúsculas. É o que chamamos em inglês de case sensitive. Dessa forma, o identificador total (com “t” minúsculo) é diferente do identificador Total (com “T” maiúsculo).

De uma maneira geral, os identificadores JavaScript seguem as seguintes regras:

• 1. Devem começar com uma letra, com $ ou com _.
  • Note que NÃO podemos começar com um número. Nesta disciplina, iniciaremos nomes de variáveis apenas com letras.
• 2. Podem conter letras, dígitos, _ e $
  • Note que NÃO podemos usar nem hífen nem ponto.
• 3. Não podem ser palavras reservadas JavaScript, como, por exemplo, palavras-chave da linguagem JavaScript. A palavra function, usada em JavaScript, para declarar funções, é um exemplo de uma palavra-chave que não pode ser usada como identificador de variável.
• 4. Evite também usar nomes de objetos e propriedades HTML.

Em JavaScript, existem maneiras diferentes de unir palavras quando damos nomes às variáveis (Figura 4):

• 1. usando o sublinhado, como em valor_total;
• 2. usando as primeiras letras maiúsculas (também chamado de Upper Camel Case), como em ValorTotal;
• 3. usando as primeiras letras, exceto na primeira palavra, maiúsculas (também chamado de Lower Camel Case), como em valorTotal.

Os programadores JavaScript tendem a usar a última opção.

No que se refere às declarações das variáveis, caso desejemos, nós podemos declarar mais de uma variável em uma mesma declaração, que pode estar em uma linha apenas ou em várias. Além disso, variáveis têm o valor undefined até que seja atribuído um valor a elas. Por fim, variáveis podem ser redeclaradas, mas isso não remove o seu valor. Vamos ver um exemplo dessas características?

Nesse exemplo, na linha 17, você pode ver a declaração de três variáveis: a variável x recebendo o valor "Olá mundo", a variável y recebendo o valor 20 e a variável valorTotal recebendo o valor x+y. A junção dessas variáveis, como vimos em aulas anteriores, faz a concatenação do texto "Olá mundo" com o valor 20 (Código 1).

Vou pegar o valor de valorTotal e atribuí-lo ao campo texto da página (linha 20). Então, conforme comentei, a variável valorTotal, ela tem o texto "Olá mundo 20" (linha 17), e, como você pode ver na Figura 5, a página exibe o valor "Olá mundo 20".

Essa declaração, porém, não precisa estar na mesma linha, certo? É possível colocar uma declaração em cada linha, e agora conseguimos ver até melhor que temos, de fato, a declaração de três variáveis.

E veja que se eu recarregar a página o efeito é o mesmo (Figura 5). A declaração em várias linhas ficou mais organizada e não tivemos consequências ou alterações no comportamento da página (Figura 6).

Agora, na linha 20, foi declarada a variável z (Figura 7), e depois dela não há atribuição nenhuma ao valor dessa variável. Então, se eu colocar o valor z para ser exibido na página (linha 22), o que veremos é a exibição do undefined, porque essa variável não tem valor definido, não existe nenhuma atribuição a ela, então o que será exibido é o undefined (Figura 8).

Por fim, vou descomentar a linha 21, onde estou redeclarando a variável valorTotal. Nós poderíamos imaginar que depois dessa redeclaração a variável valorTotal ficaria com o valor undefined, porém, podemos ver aqui que – vou novamente atribuir o valor da variável valorTotal ao campo da página HTML (linha 22) – se eu recarregar a página o texto "Olá mundo 20" volta a ser exibido, ou seja, a redeclaração da variável valorTotal na linha 21 não sobrescreveu o valor dela, ela continuou com o valor do texto "Olá mundo 20" (Figuras 9 e 10).

Encerro por aqui a nossa primeira videoaula sobre o tema Variáveis e Constantes. Na próxima videoaula, você verá mais detalhes sobre a declaração de variáveis e o uso delas. Até lá!