Variáveis e Tipos de Dados

Variáveis são como caixas onde guardamos informações. Vamos dominar esse conceito fundamental!

O que é uma variável?

Pense em uma variável como uma caixa etiquetada:

┌─────────────┐
│    "João"   │  ← valor guardado
└─────────────┘
     nome       ← etiqueta (nome da variável)

javascript

let nome = "João";

let, const e var

let - variável que pode mudar

javascript

let idade = 25;idade = 26; // pode mudar ✅

const - constante, não muda

javascript

const PI = 3.14159;PI = 3; // ERRO! ❌ não pode mudar

var - jeito antigo (evite)

javascript

var nome = "João"; // funciona, mas use let

Regra simples:

Use const por padrão
Use let quando precisar mudar o valor
Nunca use var

Tipos de dados em detalhes

String (texto)

javascript

const nome = "Maria";const frase = 'Olá, mundo!';const template = `Olá, ${nome}!`; // Propriedades e métodos úteisconsole.log(nome.length);        // 5 (quantidade de caracteres)console.log(nome.toUpperCase()); // "MARIA"console.log(nome.toLowerCase()); // "maria"

Number (número)

javascript

const inteiro = 42;const decimal = 3.14;const negativo = -10; // Cuidado com decimais!console.log(0.1 + 0.2); // 0.30000000000000004 (isso é normal) // Converter texto para númeroconst texto = "42";const numero = Number(texto); // 42const numero2 = parseInt("42"); // 42const numero3 = parseFloat("3.14"); // 3.14

Boolean (verdadeiro/falso)

javascript

const verdade = true;const mentira = false; const maiorDeIdade = idade >= 18; // true ou false // Valores "falsy" (considerados false)// false, 0, "", null, undefined, NaN

Undefined e Null

javascript

let semValor; // undefined - variável existe mas não tem valorconst vazio = null; // null - intencionalmente vazio

Array (lista)

javascript

const frutas = ["maçã", "banana", "laranja"]; console.log(frutas[0]); // "maçã" (índices começam em 0!)console.log(frutas[1]); // "banana"console.log(frutas.length); // 3 // Adicionar itemfrutas.push("uva"); // Remover últimofrutas.pop();

Object (objeto)

javascript

const pessoa = {    nome: "João",    idade: 25,    cidade: "São Paulo"}; console.log(pessoa.nome);     // "João"console.log(pessoa["idade"]); // 25 // Modificarpessoa.idade = 26; // Adicionar propriedadepessoa.profissao = "Desenvolvedor";

typeof - descobrir o tipo

javascript

console.log(typeof "Olá");     // "string"console.log(typeof 42);        // "number"console.log(typeof true);      // "boolean"console.log(typeof undefined); // "undefined"console.log(typeof null);      // "object" (bug histórico do JS!)console.log(typeof [1, 2, 3]); // "object"console.log(typeof {a: 1});    // "object"

Conversão de tipos

Para String

javascript

const num = 42;const texto = String(num);     // "42"const texto2 = num.toString(); // "42"const texto3 = num + "";       // "42"

Para Number

javascript

const texto = "42";const num = Number(texto);     // 42const num2 = parseInt(texto);  // 42 (inteiro)const num3 = parseFloat("3.14"); // 3.14const num4 = +"42";            // 42 (atalho com +)

Para Boolean

javascript

const bool = Boolean(1);    // trueconst bool2 = Boolean(0);   // falseconst bool3 = Boolean("");  // falseconst bool4 = Boolean("a"); // true

Operadores

Aritméticos

javascript

const soma = 10 + 5;        // 15const sub = 10 - 5;         // 5const mult = 10 * 5;        // 50const div = 10 / 5;         // 2const resto = 10 % 3;       // 1const potencia = 2 ** 3;    // 8

Incremento/Decremento

javascript

let x = 5;x++;  // x agora é 6x--;  // x agora é 5 x += 10; // x = x + 10, agora é 15x -= 5;  // x = x - 5, agora é 10x *= 2;  // x = x * 2, agora é 20

Comparação

javascript

5 == "5"   // true (compara só valor)5 === "5"  // false (compara valor E tipo)5 !== "5"  // true (diferente em tipo)10 > 5     // true10 < 5     // false10 >= 10   // true10 <= 9    // false

SEMPRE use === e !== para evitar bugs!

Lógicos

javascript

true && true   // true (E - ambos precisam ser true)true && false  // falsetrue || false  // true (OU - um precisa ser true)false || false // false!true          // false (NÃO - inverte)

Exercício prático

javascript

// Crie um objeto com seus dadosconst meuPerfil = {    nome: "Seu nome",    idade: 25,    cidade: "Sua cidade",    estudando: true,    habilidades: ["HTML", "CSS", "JavaScript"]}; // Exiba uma mensagem formatadaconsole.log(`Olá! Meu nome é ${meuPerfil.nome}.`);console.log(`Tenho ${meuPerfil.idade} anos e moro em ${meuPerfil.cidade}.`);console.log(`Estou estudando: ${meuPerfil.estudando ? "Sim" : "Não"}`);console.log(`Minhas habilidades: ${meuPerfil.habilidades.join(", ")}`);

Resumo

✅ let para variáveis, const para constantes
✅ Tipos: string, number, boolean, array, object
✅ typeof descobre o tipo
✅ Conversões: String(), Number(), Boolean()
✅ Use === ao invés de ==

Na próxima aula, vamos aprender a tomar decisões com condicionais! 🚀