Variáveis JavaScript podem ser declaradas de 4 maneiras:
Automaticamente
Usando var
Usando let
Usando const
Neste primeiro exemplo, x, y e z são variáveis não declaradas.
Eles são declarados automaticamente quando usados pela primeira vez:
x = 5;
y = 6;
z = x + y;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
É considerada uma boa prática de programação sempre declarar variáveis antes de usá-las.
A partir dos exemplos você pode adivinhar:
x armazena o valor 5
y armazena o valor 6
z armazena o valor 11
var x = 5;
var y = 6;
var z = x + y;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
A palavra-chave var foi usada em todo o código JavaScript de 1995 a 2015.
As palavras-chave let e const foram adicionadas ao JavaScript em 2015.
A palavra-chave var só deve ser usada em código escrito para navegadores mais antigos.
let x = 5;
let y = 6;
let z = x + y;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
As duas variáveis preço1 e preço2 são declarados com a palavra-chave const.
Esses são valores constantes e não podem ser alterados.
A variável total é declarada com a palavra-chave let.
O valor total pode ser alterado.
1. Sempre declare variáveis
2. Sempre use const se o valor não deve ser alterado
3. Sempre use const se o tipo não deve ser alterado (Arrays e Objetos)
4. Use let somente se você não puder usar const
5. Use var somente se você DEVE oferecer suporte a navegadores antigos.
Assim como na álgebra, as variáveis contêm valores:
let x = 5;
let y = 6;Assim como na álgebra, variáveis são usadas em expressões:
let z = x + y;A partir do exemplo acima, você pode adivinhar que o total é calculado como 11.
Variáveis são contêineres para armazenar valores.
Todas as variáveis JavaScript devem ser identificado 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, totalVolume).
As regras gerais para a construção de nomes para variáveis (identificadores únicos) 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 usaremos isso 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.
Os identificadores JavaScript diferenciam maiúsculas de minúsculas.
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, entretanto, 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.)
O operador "igual a" é escrito como == em JavaScript.
Variáveis JavaScript podem conter números como 100 e valores de texto como "John Corça".
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 sequência de texto.
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Criar uma variável em JavaScript é chamado de “declarar” uma variável.
Você declara uma variável JavaScript com a palavra-chave var ou let:
var carName;let carName;Após a declaração, a variável não tem valor (tecnicamente é indefinida).
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" para isso.
Em seguida, "emitimos" o valor dentro de um parágrafo HTML com id="demo":
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
É uma boa prática de programação declarar todas as variáveis no início de um script.
Você pode declarar muitas variáveis em uma instrução.
Comece a declaração com let e separe as variáveis por vírgula:
let person = "John Doe", carName = "Volvo", price = 200;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Uma declaração pode abranger várias linhas:
let person = "John Doe",
carName = "Volvo",
price = 200;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Em programas de computador, as variáveis são frequentemente declaradas sem valor. O valor que pode ser algo que deve ser calculado ou algo que será fornecido mais tarde, como entrada do usuário.
Uma variável declarada sem valor terá o valor indefinido.
A variável carName terá o valor indefinido após a execução desta instrução:
let carName;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
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 destas instruções:
var carName = "Volvo";
var carName;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Você não pode declarar novamente uma variável declarada com let ou const.
Isso não funcionará:
let carName = "Volvo";
let carName;Assim como acontece com a álgebra, você pode fazer aritmética com variáveis JavaScript, usando operadores como = e +:
let x = 5 + 2 + 3;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Você também pode adicionar strings, mas as strings serão concatenadas:
let x = "John" + " " + "Doe";Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Tente também isto:
let x = "5" + 2 + 3;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Se você colocar um número entre aspas, o restante dos números será tratado como string e concatenado.
Agora tente isto:
let x = 2 + 3 + "5";Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Como o JavaScript trata o cifrão como uma letra, os identificadores que contêm $são nomes de variáveis válidos:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
Usar o cifrão não é muito comum em JavaScript, mas os 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 principal $ é usado para selecionar elementos HTML. Em jQuery $ ("p"); significa "selecionar todos os elementos p".
Como o JavaScript trata o sublinhado como uma letra, os identificadores que contêm _ são nomes de variáveis válidos:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
Usar o sublinhado não é muito comum em JavaScript, mas uma convenção entre programadores profissionais é usá-lo como um apelido para Variáveis "privadas (ocultas)".