Variáveis e Tipos de Dados em JavaScript
Quando se aprende um novo idioma, o primeiro passo é conhecer as palavras e entender como combiná-las. Com a programação é a mesma coisa.
Neste Post, você vai aprender as palavras e expressões básicas do JavaScript aquelas que o computador usa para armazenar, processar e manipular informações.
Pense em cada linha de código como uma frase que o computador precisa entender para realizar uma ação, mas, para escrever essas “frases”, você primeiro precisa saber quais são os elementos fundamentais da linguagem.
🧠 O que é
uma variável
Uma variável é um espaço na memória do computador
reservado para armazenar valores temporários.
Pense nela como uma caixinha com um
rótulo o rótulo é o nome da variável, e dentro dela você guarda o valor
que quiser.
💬 Exemplo de analogia simples:
Imagine três caixas:
● Uma chamada nome → guarda “Maria”;
● Uma chamada idade → guarda 25;
● Uma chamada cidade → guarda “São Paulo”.
Em JavaScript, isso é feito assim:
var nome = "Maria";
var idade = 25;
var cidade = "São Paulo";
Essas informações ficam disponíveis para serem usadas, modificadas e combinadas em outras partes do programa.
🧩 Tipos de Variáveis: var, let e const
Em JavaScript, há três palavras-chave para criar variáveis:
var, let e const.
🔹 var
É a forma mais antiga de declarar variáveis.
Funciona, mas hoje em dia não é a mais recomendada, pois pode causar confusão em projetos grandes (o escopo dela é amplo demais).
var cidade = "São Paulo";
🔹 let
É a forma mais usada atualmente.
Ela cria variáveis que podem mudar de valor durante o programa.
let comida = "feijão";
comida = "arroz"; // Mudou o valor
console.log(comida); // Mostra "arroz"
🔹 const
É usada quando você não quer que o valor mude.
Ou seja, a variável é “constante”.
const pais = "Brasil";
pais = "Chile"; // ERRO! Não podemos reatribuir.
Use let quando o valor pode mudar e const quando
não deve mudar.
Essa é uma prática moderna e
profissional.
💡 Exemplo:
let nome = "Carlos";
const anoNascimento = 1990;
var cidade = "Rio de Janeiro";
💬 Explicação:
● let → É usada para valores mutáveis (podem mudar depois);
● const → É usada para valores fixos (não devem mudar);
● var → É o modo antigo ainda funciona, mas deve ser evitado em códigos modernos, pois sua forma de escopo é menos previsível.
⚙️ Diferenças entre var, let e const
var → Pode ser alterada? ✅ Sim. Escopo → Função. Recomendado? → ⚠️ Evite (legado)
let → Pode ser alterada? ✅ Sim. Escopo → Bloco. Recomendado? → ✅ Sim
const → Pode ser alterada? ❌ Não. Escopo → Bloco. Recomendado? → ✅ Sim
💬 “Escopo de bloco” significa que a variável só existe dentro das chaves { } onde foi criada.
Isso evita conflitos e torna o código mais previsível.
⚡ Nomeando variáveis corretamente
Apesar de você poder escolher o nome que quiser, existem regras e boas práticas.
✅ Regras obrigatórias
1. O nome deve começar com uma letra, $ ou _;
2. Não pode começar com número;
3. Não pode conter espaços ou caracteres especiais;
4. É sensível a maiúsculas e minúsculas (nome ≠ Nome).
💡 Exemplo correto:
let nomeUsuario = "Ana";
let idadeUsuario = 28;
let possuiCarteira = true;
🚫 Exemplo incorreto:
let 2nome = "Pedro"; // não pode começar com número
let meu-nome = "Lucas"; // não pode usar hífen
let var = "teste"; // palavra reservada do JS
Dica de estilo: use a convenção camelCase, onde a primeira palavra é minúscula e as seguintes começam com maiúscula (ex.: numeroDaConta, corFavorita).
💬 Tipos de dados no JavaScript
O JavaScript é uma linguagem com tipagem dinâmica, o que significa que o tipo de uma variável é determinado automaticamente pelo valor nela contido.
🔹 Principais tipos de dados:
🧩 Trabalhando com Strings
Strings são usadas para textos e mensagens. Você pode usar aspas simples, duplas ou crases (para template strings).
let nome = "Carla";
let cidade = 'Recife';
let saudacao = `Olá, ${nome}, seja bem-vinda a ${cidade}!`;
Exemplo: Com "Olá Mundo"
let texto1 = "Olá";
let texto2 = 'Mundo';
let texto3 = `${texto1} ${texto2}!`; // Usando Template String
console.log(texto3);
O resultado será:
Olá Mundo!
As Template Strings (entre crases) são muito úteis para unir textos e variáveis de forma mais elegante:
let nome = "Carlos";
let idade = 22;
console.log(`Meu nome é ${nome} e tenho ${idade} anos.`);
💡 A diferença das crases (`) é que elas permitem interpolar variáveis dentro do texto, usando ${ }.
🔢 Trabalhando com Numbers
Em JavaScript, todos os números (inclusive decimais) pertencem ao tipo Number.
let x = 10;
let y = 2.5;
Você pode realizar operações matemáticas simples:
console.log(x + y); // Soma
console.log(x - y); // Subtração
console.log(x * y); // Multiplicação
console.log(x / y); // Divisão
Resultado:
12.5
7.5
25
4
Os números podem ser inteiros, decimais ou negativos.
let idade = 30;
let altura = 1.75;
let soma = idade + 5; // 35
let metade = altura / 2; // 0.875
💬 Assim como em matemática, o JS segue a ordem das operações, respeitando parênteses e precedência.
Exemplo:
let resultado = (10 + 5) * 2; // retorna 30
🔹 Operadores Matemáticos: Exemplo e resultado
+ → 5 + 2 = 7
- → 10 - 3 = 7
* → 4 * 2 = 8
/ → 9 / 3 = 3
% → 10 % 3 1 (resto da divisão)
** → 2 ** 3 8 (potência)
Exemplo prático:
let resultado = (10 + 2) * 3;
console.log(resultado); // 36
✅ Trabalhando com
Booleanos
O tipo boolean serve para representar valores lógicos:
true → verdadeiro
false → falso
let possuiCarteira = true;
let maiorDeIdade = false;
let chovendo = true;
let frio = false;
if (chovendo) {
console.log("Leve um guarda-chuva!");
}
if (!frio) {
console.log("Não precisa de casaco hoje!");
}
O símbolo ! nega a condição, ou seja, transforma true em false e vice-versa. Mais tarde, você usará esses valores nos condicionais (if, else) para tomar decisões no código.
🔹Operadores de Comparação
Esses operadores comparam valores e retornam true (verdadeiro) ou false (falso): Exemplo e significado.
== → 5 == '5' → Igual (sem verificar tipo)
=== → 5 === '5' → Igual e do mesmo tipo
!= → 5 != 3 → Diferente
> → 10 > 5 → Maior que
< → 10 < 5 → Menor que
>= → 10 >= 10 → Maior ou igual
<= → 4 <= 5 → Menor ou igual
Exemplo:
let nota = 7;
console.log(nota >= 6); // true
Significa que o aluno foi aprovado.
A Estrutura IF (Se)
O comando if significa literalmente “se”.
Ele é seguido por uma
condição: se ela for verdadeira (true), o bloco de código dentro dele é
executado.
let nota = 8;
if (nota >= 6) {
console.log("Aprovado!");
}
O programa lê:
“Se a variável nota for maior ou igual a 6, então mostre
‘Aprovado!’.”
Se nota fosse 5, nada aconteceria, porque a condição não
seria satisfeita.
O ELSE (Senão)
E se a condição for falsa?
Usamos o else, que
executa um outro bloco quando o if não for verdadeiro.
let nota = 5;
if (nota >= 6) {
console.log("Aprovado!");
} else {
console.log("Reprovado!");
}
Saída:
Reprovado!
💡 Dica: use else sempre
que precisar oferecer um “plano B” para o código.
Combinação de Condições com ELSE IF
Às vezes, há mais de duas possibilidades.
Imagine um sistema de
notas com três resultados:
● Nota ≥ 6
→ Aprovado
● Nota
entre 4 e 5.9 → Recuperação
● Nota <
4 → Reprovado
Podemos tratar isso usando else e if:
let nota = 5;
if (nota >= 6) {
console.log("Aprovado");
} else if (nota >= 4) {
console.log("Recuperação");
} else {
console.log("Reprovado");
}
A lógica é lida de cima para baixo o programa executa apenas o primeiro bloco cuja condição for verdadeira.
🧩 Null e Undefined
Ambos indicam ausência de valor, mas de maneiras diferentes.
let carro; // undefined: variável criada mas sem valor
let moto = null; // null: intencionalmente vazio
💬 Diferença prática:
● undefined → O JS ainda não sabe o valor.
● null → O programador quis esvaziar o valor.
🧱 Objetos e Arrays (visão inicial)
Você verá esses temas em profundidade nas aulas 12 e 13, mas adiantando:
Objeto:
let pessoa = {
nome: "Lucas",
idade: 25,
cidade: "Curitiba"
};
Acesso:
console.log(pessoa.nome);
Array (lista):
let frutas = ["Maçã", "Banana", "Uva"];
console.log(frutas[1]); // imprime Banana
✍️ Comentários em JavaScript
Comentários servem para explicar o código ou desativar temporariamente trechos de código sem apagá-los.
🔹 Comentário de linha única:
// Este é um comentário de uma linha
let nome = "João"; // Comentário ao lado de um código
🔹 Comentário de múltiplas linhas:
/*
Este é um comentário de várias linhas
Ideal para documentar trechos longos de código
*/
💬 Boas práticas:
● Sempre documente códigos mais complexos;
● Explique o motivo do código existir, não apenas o que ele faz;
● Use comentários para separar seções ou marcar melhorias futuras.
🧮 Exemplo completo
// Declaração de variáveis
let nome = "Fernanda";
const anoNascimento = 1996;
let idade = 2024 - anoNascimento; // cálculo automático
let ativo = true;
// Exibindo informações no console
console.log("Usuário: " + nome);
console.log("Idade: " + idade);
console.log("Ativo? " + ativo);
// Usando template string
console.log(`A usuária ${nome} tem ${idade} anos e status ativo: ${ativo}`);
Resultado no console:
Usuário: Fernanda
Idade: 28
Ativo? true
A usuária Fernanda tem 28 anos e status ativo: true
💻 Exercício Prático
Crie um arquivo chamado variaveis.html e adicione o seguinte conteúdo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Variáveis e Tipos de Dados</title>
</head>
<body>
<h1>Praticando Variáveis em JavaScript</h1>
<p>Abra o console (F12) para ver os resultados!</p>
<script>
// Declaração de variáveis
let nome = "Marcos";
let idade = 34;
let cidade = "Florianópolis";
const pais = "Brasil";
let estudante = false;
// Exibindo no console
console.log("Nome: " + nome);
console.log("Idade: " + idade);
console.log("Cidade: " + cidade);
console.log("País: " + pais);
console.log("É estudante? " + estudante);
</script>
</body>
</html>
Abra em seu navegador e observe o resultado no console do desenvolvedor.
🧩 Desafio Final da Aula
Crie um script que:
1. Peça ao usuário seu nome e idade (prompt());
2. Calcule o ano de nascimento com base no ano atual;
3.
Mostre uma mensagem na tela dizendo:
“Olá, [nome]! Você nasceu em [ano].”
💡 Dica de solução:
let nome = prompt("Qual é o seu nome?");
let idade = prompt("Quantos anos você tem?");
let anoNascimento = 2024 - idade;
alert(`Olá, ${nome}! Você nasceu em ${anoNascimento}.`);
🎓 Conclusão
Agora você entende como o JavaScript guarda e manipula
informações,
sabe criar, alterar e exibir dados de
diversas formas e domina a estrutura básica de um script interativo.
Esses conceitos são as ferramentas fundamentais para
todas as próximas aulas.
A partir da próxima lição, você
aprenderá a usar operadores e cálculos, tornando seus scripts inteligentes
e funcionais.
📚 Continue aprendendo JavaScript:
Comentários
Postar um comentário