JavaScript Syntax Cheatsheet (Guia Rápido)

Um guia de referência rápida para as principais sintaxes e recursos modernos do JavaScript.

1. Variáveis e Escopo

No JavaScript moderno, o escopo é fundamental. Utilizamos const para valores que não mudam e let para variáveis que precisam de ser reatribuídas dentro do seu bloco de código. O var deve ser evitado por ter um escopo menos previsível.

// Constante: valor que não pode ser reatribuído
const pi = 3.14;

// Let: variável com escopo de bloco
let contador = 0;
contador += 1;

// Var: (Legado/Não recomendado) Escopo de função
var nome = "Global";

1. Tipos de Dados

O JavaScript é uma linguagem de tipagem dinâmica. Isto significa que uma variável pode conter diferentes tipos de dados, desde textos simples a estruturas complexas como objetos e listas.

const texto = "Olá Mundo";       // String (Texto)
const numero = 42;               // Number (Inteiro ou Decimal)
const booleano = true;           // Boolean (Verdadeiro ou Falso)
const lista = [1, 2, 3];         // Array (Lista de valores)
const objeto = { id: 1 };        // Object (Pares de chave/valor)
const vazio = null;              // Null (Valor nulo intencional)
let indefinido;                  // Undefined (Variável sem valor)

1. Funções

As funções são blocos de construção essenciais. As Arrow Functions introduzidas no ES6 tornaram a escrita mais concisa, especialmente quando a lógica é simples e pode ser escrita numa única linha com retorno implícito.

// Função Tradicional
function somar(a, b) {
  return a + b;
}

// Arrow Function (Moderna)
const subtrair = (a, b) => a - b;

// Arrow Function com retorno implícito (não precisa de {} ou return)
const dobrar = n => n * 2;

1. Condicionais

As condicionais permitem que o código tome decisões. O operador ternário é uma forma elegante de escrever um if/else simples numa só linha, enquanto o switch ajuda a gerir múltiplas condições de uma mesma variável.

// If / Else padrão
if (idade >= 18) {
  console.log("Adulto");
} else {
  console.log("Menor");
}

// Operador Ternário (Forma curta de if/else)
const status = idade >= 18 ? "Liberado" : "Bloqueado";

// Switch para múltiplas opções
switch (cor) {
  case "red": return "Vermelho";
  case "blue": return "Azul";
  default: return "Cor desconhecida";
}

1. Loops e Iteração

Para percorrer dados, o for...of é a forma mais legível para Arrays. Além disso, métodos funcionais como .map(), .filter() e o poderoso .flatMap() permitem transformar, filtrar e achatar coleções de dados de forma eficiente.

const frutas = ["Maçã", "Banana", "Uva"];

// For...of: Ideal para percorrer elementos de um array
for (const fruta of frutas) {
  console.log(fruta);
}

// Map: Cria um novo array transformando cada elemento
const dobrados = [1, 2, 3].map(n => n * 2);

// Filter: Cria um novo array apenas com os itens que passam no teste
const pares = [1, 2, 3, 4].filter(n => n % 2 === 0);

// FlatMap: Mapeia cada elemento e achata o resultado num novo array
// Útil para quando a função de mapeamento retorna um array
const frases = ["Olá mundo", "JS é incrível"];
const palavras = frases.flatMap(f => f.split(" ")); 
// Resultado: ["Olá", "mundo", "JS", "é", "incrível"]

1. Template Literals

Esquecer a concatenação manual com o símbolo +. Com as crases, podemos interpolar variáveis e expressões diretamente dentro da string, facilitando a leitura do código.

const usuario = "Carlos";
// Uso de ${} dentro de crases para inserir valores dinâmicos
console.log(`Olá, ${usuario}! Hoje é ${new Date().toLocaleDateString()}.`);

1. Desestruturação (Destructuring)

A desestruturação permite "desembalar" valores de objetos ou arrays de forma rápida. É extremamente útil para capturar propriedades de objetos de configuração ou retornos de funções.

const config = { tema: "dark", lang: "pt-br" };

// Extraindo propriedades 'tema' e 'lang' diretamente do objeto
const { tema, lang } = config;

// Extraindo valores por posição de um array
const [primeiro, segundo] = [10, 20];

1. Promises e Async/Await

Para operações que demoram tempo (como carregar dados da internet), usamos o modo assíncrono. O par async/await permite escrever código assíncrono que se parece com código sequencial, tornando-o muito mais fácil de manter.

// A palavra 'async' indica que a função lidará com processos demorados
async function buscarDados() {
  try {
    // 'await' pausa a execução até que a promessa seja resolvida
    const resposta = await fetch("[https://api.exemplo.com/dados](https://api.exemplo.com/dados)");
    const dados = await resposta.json();
    console.log(dados);
  } catch (erro) {
    // Captura erros se a conexão ou os dados falharem
    console.error("Erro na busca:", erro);
  }
}

1. Spread & Rest Operator

Os três pontos ... têm dois papéis: o Spread "espalha" elementos de um array noutro, enquanto o Rest "recolhe" vários argumentos numa única variável dentro de uma função.

// Spread (Espalhar): Copia ou expande arrays/objetos
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // Resulta em [1, 2, 3, 4]

// Rest (Agrupar): Transforma argumentos soltos num array
function listar(...itens) {
  console.log(itens); // 'itens' será um array com todos os argumentos
}

Dica de Performance: Utilize sempre const por padrão. Só mude para let se tiver a certeza absoluta de que o valor da variável precisará de ser alterado durante a execução.