Variáveis JavaScript
4 maneiras de declarar uma variável JavaScript:
- Usando
var
- Usando
let
- Usando
const
- Usando nada
O que são Variáveis?
Variáveis são contêineres para armazenar dados (armazenando valores de dados).
Neste exemplo, x
, y
e z
, são variáveis, declaradas com a var
palavra-chave:
Exemplo
var x = 5;
var y = 6;
var z = x + y;
Neste exemplo, x
, y
e z
, são variáveis, declaradas com a let
palavra-chave:
Exemplo
let x = 5;
let y = 6;
let z = x + y;
Neste exemplo, x
, y
e z
, são variáveis não declaradas:
Exemplo
x = 5;
y = 6;
z = x + y;
De todos os exemplos acima, você pode adivinhar:
- x armazena o valor 5
- y armazena o valor 6
- z armazena o valor 11
Quando usar JavaScript var?
Sempre declare variáveis JavaScript com var
, let
ou const
.
A var
palavra-chave é usada em todo o código JavaScript de 1995 a 2015.
As palavras-chave let
e const
foram adicionadas ao JavaScript em 2015.
Se você deseja que seu código seja executado em um navegador mais antigo, você deve usar var
.
Quando usar JavaScript const?
Se você quer uma regra geral: sempre declare variáveis com const
.
Se você acha que o valor da variável pode mudar, use let
.
Neste exemplo, price1
, price2
e total
, são variáveis:
Exemplo
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
As duas variáveis price1
e price2
são declaradas com a palavra- const
chave.
Estes são valores constantes e não podem ser alterados.
A variável total
é declarada com a palavra- let
chave.
Este é um valor que pode ser alterado.
Assim como a álgebra
Assim como na álgebra, as variáveis guardam valores:
let x = 5;
let y = 6;
Assim como na álgebra, as variáveis são usadas em expressões:
let z = x + y;
A partir do exemplo acima, você pode adivinhar que o total é calculado em 11.
Observação
Variáveis são contêineres para armazenar valores.
Identificadores JavaScript
Todas as variáveis JavaScript devem ser identificadas com nomes exclusivos .
Esses nomes exclusivos são chamados de identificadores .
Os identificadores podem ser nomes curtos (como x e y) ou nomes mais descritivos (idade, soma, volume total).
As regras gerais para construir nomes para variáveis (identificadores exclusivos) são:
- Os nomes podem conter letras, dígitos, sublinhados e cifrões.
- Os nomes devem começar com uma letra
- Os nomes também podem começar com $ e _ (mas não o usaremos neste tutorial)
- Os nomes diferenciam maiúsculas de minúsculas (y e Y são variáveis diferentes)
- Palavras reservadas (como palavras-chave JavaScript) não podem ser usadas como nomes
Observação
Os identificadores JavaScript diferenciam maiúsculas de minúsculas.
O Operador de Atribuição
Em JavaScript, o sinal de igual ( =
) é um operador de "atribuição", não um operador "igual a".
Isso é diferente da álgebra. O seguinte não faz sentido em álgebra:
x = x + 5
Em JavaScript, no entanto, faz todo o sentido: atribui o valor de x + 5 a x.
(Ele calcula o valor de x + 5 e coloca o resultado em x. O valor de x é incrementado em 5.)
Observação
O operador "igual a" é escrito como ==
em JavaScript.
Tipos de dados JavaScript
As variáveis JavaScript podem conter números como 100 e valores de texto como "John Doe".
Na programação, os valores de texto são chamados de strings de texto.
JavaScript pode lidar com muitos tipos de dados, mas por enquanto, pense apenas em números e strings.
Strings são escritas entre aspas duplas ou simples. Os números são escritos sem aspas.
Se você colocar um número entre aspas, ele será tratado como uma string de texto.
Exemplo
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
Declarando uma variável JavaScript
Criar uma variável em JavaScript é chamado de "declarar" uma variável.
Você declara uma variável JavaScript com var
a palavra-chave ou let
:
var carName;
ou:
let carName;
Após a declaração, a variável não tem valor (tecnicamente é undefined
).
Para atribuir um valor à variável, use o sinal de igual:
carName = "Volvo";
Você também pode atribuir um valor à variável ao declará-la:
let carName = "Volvo";
No exemplo abaixo, criamos uma variável chamada carName
e atribuímos o valor "Volvo" a ela.
Em seguida, "enviamos" o valor dentro de um parágrafo HTML com id="demo":
Exemplo
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
Observação
É uma boa prática de programação declarar todas as variáveis no início de um script.
Uma declaração, muitas variáveis
Você pode declarar muitas variáveis em uma instrução.
Inicie a instrução com var
e separe as variáveis por vírgula :
Exemplo
let person = "John Doe", carName = "Volvo", price = 200;
Uma declaração pode abranger várias linhas:
Exemplo
let person = "John Doe",
carName = "Volvo",
price = 200;
Valor = indefinido
Em programas de computador, as variáveis geralmente são declaradas sem valor. O valor pode ser algo que precisa ser calculado ou algo que será fornecido posteriormente, como entrada do usuário.
Uma variável declarada sem valor terá o valor
undefined
.
A variável carName terá o valor undefined
após a execução desta instrução:
Exemplo
let carName;
Redeclarando variáveis JavaScript
Se você declarar novamente uma variável JavaScript declarada com var
, ela não perderá seu valor.
A variável carName
ainda terá o valor "Volvo" após a execução dessas instruções:
Exemplo
var carName = "Volvo";
var carName;
Observação
Você não pode declarar novamente uma variável declarada com let
ou const
.
Isso não funcionará:
let carName = "Volvo";
let carName;
Aritmética JavaScript
Assim como na álgebra, você pode fazer aritmética com variáveis JavaScript, usando operadores como =
e +
:
Exemplo
let x = 5 + 2 + 3;
Você também pode adicionar strings, mas as strings serão concatenadas:
Exemplo
let x = "John" + " " + "Doe";
Tente também isso:
Exemplo
let x = "5" + 2 + 3;
Observação
Se você colocar um número entre aspas, o restante dos números será tratado como strings e concatenado.
Agora tente isso:
Exemplo
let x = 2 + 3 + "5";
JavaScript cifrão $
Como o JavaScript trata um cifrão como uma letra, identificadores contendo $ são nomes de variáveis válidos:
Exemplo
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
Usar o cifrão não é muito comum em JavaScript, mas programadores profissionais costumam usá-lo como um alias para a função principal em uma biblioteca JavaScript.
Na biblioteca JavaScript jQuery, por exemplo, a função main
$
é usada para selecionar elementos HTML. Em jQuery $("p");
significa "selecionar todos os elementos p".
Sublinhado JavaScript (_)
Como o JavaScript trata o sublinhado como uma letra, os identificadores que contêm _ são nomes de variáveis válidos:
Exemplo
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
Usar o sublinhado não é muito comum em JavaScript, mas uma convenção entre programadores profissionais é usá-lo como um alias para variáveis "privadas (ocultas)".