Guia de Referência JavaScript com Exemplos

1. const, let, var — qual é a diferença

As três palavras-chave criam uma variável, mas se comportam de forma diferente.

var — a opção obsoleta

var é a forma mais antiga. Tem um escopo de função "com vazamento" (function scope), então uma variável pode "escapar" acidentalmente de um bloco { }. Hoje não é recomendado usá-la.

let — uma variável que pode mudar

let contador = 0;
contador = contador + 1; // o valor pode ser mudado
console.log(contador); // 1

let vive estritamente dentro do bloco { } em que foi declarada — isso se chama block scope.

const — uma variável que não pode ser reatribuída

const nome = "João";
nome = "Pedro"; // ❌ Erro: Assignment to constant variable

const usuario = { nome: "João" };
usuario.nome = "Pedro"; // ✅ isso pode

Regra padrão: use const em tudo que não vai ser reatribuído. Se o valor vai mudar, use let. var já quase não é usado hoje em dia.

2. Como selecionar um elemento na página

Para mudar algo no HTML via JavaScript, primeiro é preciso "encontrar" esse elemento.

querySelector — encontra o primeiro elemento correspondente

const btn = document.querySelector(".meu-botao");
const titulo = document.querySelector("#titulo-principal");

Funciona como um seletor CSS: .classe — por classe, #id — por id, tag — por tag.

querySelectorAll — encontra todos os elementos correspondentes

const items = document.querySelectorAll(".list-item");
items.forEach(function (item) {
    console.log(item.textContent);
});

getElementById — busca rápida por id

const caixa = document.getElementById("caixa");

querySelector é mais universal e em 99% dos casos é suficiente — recomendamos começar por ele.

3. onclick, onchange, addEventListener

Eventos são reações às ações do usuário: um clique, digitar texto, enviar um formulário.

onclick — o evento de clique

const btn = document.querySelector(".btn");
btn.onclick = function () {
    console.log("Botão clicado!");
};

onchange — o evento de mudança de valor

Dispara quando o usuário muda o valor de um input, select ou checkbox e sai do foco do elemento.

const select = document.querySelector("select");
select.onchange = function () {
    console.log("Selecionado:", select.value);
};

addEventListener — uma forma mais flexível

btn.addEventListener("click", function () {
    console.log("Clique via addEventListener");
});

4. Template literals

Permitem inserir variáveis diretamente em uma string, usando crase ` em vez de aspas normais.

const nome = "Maria";
const idade = 20;

// forma antiga
console.log("Olá, " + nome + "! Você tem " + idade + " anos.");

// template literal
console.log(`Olá, ${nome}! Você tem ${idade} anos.`);

Dentro de ${ } pode-se escrever qualquer expressão, não só uma variável: `No próximo ano: ${idade + 1}`.

5. Arrow functions vs normais

// função normal
function soma(a, b) {
    return a + b;
}

// arrow function
const soma2 = (a, b) => a + b;

Arrow functions são mais curtas — se o corpo é uma única expressão, pode-se omitir o return e as chaves.

A diferença principal é que arrow functions não têm seu próprio this, elas pegam do código ao redor. No início isso não é crítico, mas é importante saber que essa diferença existe.

6. Percorrer arrays: forEach, map, filter

forEach — simplesmente "percorrer" um array

const frutas = ["maçã", "banana", "pera"];
frutas.forEach(function (fruta) {
    console.log(fruta);
});

map — criar um novo array a partir de um existente

const numeros = [1, 2, 3];
const duplicados = numeros.map(n => n * 2);
console.log(duplicados); // [2, 4, 6]

filter — manter só os elementos que você precisa

const numeros = [1, 2, 3, 4, 5];
const pares = numeros.filter(n => n % 2 === 0);
console.log(pares); // [2, 4]

Uma regra simples: forEach quando você só precisa fazer algo com cada elemento; map quando precisa de um novo array transformado; filter quando precisa selecionar parte dos elementos.

7. Trabalhar com objetos

const usuario = {
    nome: "Ana",
    idade: 22,
    ehEstudante: true
};

console.log(usuario.nome);       // com ponto
console.log(usuario["idade"]);   // com colchetes

usuario.cidade = "São Paulo";    // adicionar nova propriedade
delete usuario.ehEstudante;      // remover propriedade

Colchetes são úteis quando o nome da propriedade está guardado em uma variável: usuario[key].

8. JSON: stringify e parse

JSON é um formato de troca de dados. Em JavaScript, um objeto e uma string JSON não são a mesma coisa — é preciso converter entre eles.

const usuario = { nome: "Oscar", idade: 30 };

// objeto → string JSON
const json = JSON.stringify(usuario);
console.log(json); // '{"nome":"Oscar","idade":30}'

// string JSON → objeto
const parseado = JSON.parse(json);
console.log(parseado.nome); // "Oscar"

JSON.stringify é necessário principalmente para enviar dados a um servidor ou guardá-los em localStorage, e JSON.parse para o processo inverso.

O que vem depois