JS Moderno (ES6+): O Essencial

Declara uma constante imutável com valor "João". Não pode ser reatribuída após a declaração e deve ser inicializada no mesmo momento.

const nome = "João"

Declara uma variável com escopo de bloco (scope). Pode ser reatribuída e seu valor pode ser alterado durante a execução do programa.

let idade = 25

Declara uma variável com escopo de função. Devido a comportamentos inesperados de hoisting, é geralmente recomendado evitar seu uso em favor de `let` ou `const`.

var antigo = "evitar"

Retorna uma string indicando o tipo de dado do operando. Para strings, retorna "string".

typeof "texto"

Retorna a string "number", indicando que o operando é um número inteiro ou de ponto flutuante.

typeof 42

Retorna a string "boolean", indicando um valor verdadeiro (truthy) ou falso (falsy).

typeof true

Retorna a string "object". Este é um bug histórico na especificação da linguagem JavaScript que persiste para compatibilidade.

typeof null

Retorna a string "undefined", indicando que uma variável foi declarada mas não recebeu valor.

typeof undefined

Retorna a string "symbol". Cria um identificador único e imutável, frequentemente usado para propriedades de objeto.

typeof Symbol()

Retorna a string "bigint". Permite representar números inteiros de precisão arbitrária.

typeof 42n

Converte uma string contendo um número para o tipo primitivo number (Float). Se falhar, retorna NaN.

Number("123")

Converte qualquer valor para o tipo primitivo string.

String(123)

Converte um valor para o tipo primitivo booleano. Valores truthy (como 1) tornam-se true.

Boolean(1)

Lê a string e retorna o primeiro inteiro encontrado até o primeiro caractere não numérico.

parseInt("42px")

Lê a string e retorna o primeiro número decimal encontrado até o final da string.

parseFloat("3.14")

Cria uma nova instância de array com os elementos fornecidos como argumentos.

const arr = [1, 2, 3]

Cria um novo array usando a função construtora. Funciona de forma similar ao literal.

const arr = new Array(1, 2, 3)

Cria um novo array com elementos passados como argumentos, mesmo se houver apenas um argumento numérico.

const arr = Array.of(1, 2, 3)

Cria um array com tamanho 5 e preenche todas as posições com o valor 0.

const arr = Array(5).fill(0)

Adiciona um ou mais elementos ao final do array e retorna o novo tamanho do array.

arr.push(4)

Remove o último elemento de um array e retorna esse elemento.

arr.pop()

Adiciona um ou mais elementos no início do array e retorna o novo tamanho.

arr.unshift(0)

Remove o primeiro elemento de um array e retorna esse elemento.

arr.shift()

Retorna uma cópia de uma parte de um array para um novo array, sem modificar o original. O índice final é exclusivo.

arr.slice(1, 3)

Alterar o conteúdo de um array adicionando novos elementos, removendo elementos existentes, ou ambos, sem criar um novo array.

arr.splice(1, 2)

Executa uma função fornecida uma vez para cada elemento do array.

arr.forEach(item => console.log(item))

Cria um novo array preenchido com os resultados da chamada de uma função fornecida em cada elemento.

arr.map(item => item * 2)

Cria um novo array com todos os elementos que passam no teste implementado pela função fornecida.

arr.filter(item => item > 2)

Executa uma função de redução em cada elemento do array, resultando em um único valor de retorno.

arr.reduce((acc, item) => acc + item, 0)

Retorna o valor do primeiro elemento no array que satisfaz a função de teste fornecida.

arr.find(item => item > 2)

Retorna o índice do primeiro elemento no array que satisfaz a função de teste fornecida.

arr.findIndex(item => item > 2)

Retorna true se pelo menos um elemento no array satisfizer a condição da função de teste passada.

arr.some(item => item > 2)

Retorna true se todos os elementos no array satisfizerem a condição da função de teste passada.

arr.every(item => item > 0)

Cria um novo objeto contendo pares de chave-valor.

const obj = { nome: "João", idade: 25 }

Cria um novo objeto usando a função construtora global Object.

const obj = new Object()

Cria um novo objeto com null como protótipo (não herdará propriedades de Object.prototype).

const obj = Object.create(null)

Acessa a propriedade "nome" do objeto obj.

obj.nome

Acessa a propriedade "nome" do objeto obj usando uma string como chave.

obj["nome"]

Acessa uma propriedade onde o nome da chave é armazenado em uma variável.

obj.chaveDinamica

Remove uma propriedade de um objeto e retorna true se a propriedade existia e foi removida.

delete obj.idade

Retorna um array contendo as propriedades enumeráveis próprias de um objeto, na mesma ordem em que um loop for...in percorre.

Object.keys(obj)

Retorna um array contendo todos os valores das propriedades próprias enumeráveis de um objeto.

Object.values(obj)

Retorna um array de pares [chave, valor] para cada propriedade enumerável própria de um objeto.

Object.entries(obj)

Copia todas as propriedades enumeráveis de um ou mais objetos de origem para um objeto de destino.

Object.assign({}, obj1, obj2)

Permite que um objeto seja expandido em um conjunto de argumentos.

{ ...obj1, ...obj2 }

Impede que novos propriedades sejam adicionadas, existentes sejam removidas ou que as propriedades existentes possam ser alteradas.

Object.freeze(obj)

Impede a adição de novas propriedades e a remoção de propriedades existentes, mas permite a modificação de valores de propriedades existentes.

Object.seal(obj)

Permite definir o nome da propriedade dinamicamente usando uma expressão.

const obj = { [chave]: "valor" }

Permite omitir a palavra-chave "function" e a palavra-chave "function" no retorno ao definir um método dentro de um objeto.

metodo() { return "oi" }

Define um método que retorna automaticamente uma propriedade quando ela é acessada.

get prop() { return this._prop }

Define um método que recebe um valor quando a propriedade é definida, permitindo manipulação de dados antes da atribuição.

set prop(val) { this._prop = val }

Declara uma função nomeada que pode ser chamada pelo nome. É "hoisted" (elevada) no escopo global.

function soma(a, b) { return a + b }

Define uma função e a atribui a uma variável. Não é "hoisted" e só fica disponível após a linha de declaração.

const soma = function(a, b) { return a + b }

Define uma função anônima com sintaxe mais curta. Não possui seu próprio `this`, `arguments`, `super` ou `new.target`.

const soma = (a, b) => a + b

Usa parênteses ao redor da seta para retornar um objeto literal, pois as chaves {} são interpretadas como o corpo da função.

const soma = (a, b) => ({ resultado: a + b })

Permite representar uma quantidade indefinida de argumentos como um array.

function soma(...numeros) { return numeros.reduce((a, b) => a + b, 0) }

Expande um array em uma lista de argumentos individuais para ser passado para uma função.

soma(...nums)

Define um valor padrão para um parâmetro de função que será usado se o argumento não for fornecido.

function saudar(nome = "Visitante") { return `Olá, ${nome}!` }

Transforma uma função que aceita múltiplos argumentos em uma série de funções que aceitam um único argumento.

const multiplicar = fator => num => num * fator

Função que recebe outra função como argumento ou retorna uma função.

const aplicar = (fn, valor) => fn(valor)

Cria uma Promise que será resolvida ou rejeitada em algum momento no futuro.

const promise = new Promise((resolve, reject) => { setTimeout(() => resolve("Sucesso!"), 1000) })

Registra uma função de callback a ser executada quando a Promise for resolvida com um valor.

promise.then(result => console.log(result))

Registra uma função de callback a ser executada quando a Promise for rejeitada com um motivo.

promise.catch(error => console.error(error))

Registra uma função de callback a ser executada quando a Promise for concluída (seja resolvida ou rejeitada).

promise.finally(() => console.log("Finalizado"))

Declara uma função que pode conter expressões await que pausam a execução até que a Promise seja resolvida.

async function buscarDados() { try { const response = await fetch("/api/dados") ... } }

Retorna uma Promise que é resolvida quando todas as promises no iterável forem resolvidas.

Promise.all([p1, p2, p3])

Retorna uma Promise que resolve ou rejeita assim que uma das promises no iterável resolver ou rejeitar.

Promise.race([p1, p2])

Retorna uma Promise que resolve quando todas as promises fornecidas são concluídas (seja resolvidas ou rejeitadas).

Promise.allSettled([p1, p2])

Retorna uma Promise que resolve assim que uma das promises no iterável resolver.

Promise.any([p1, p2])

Interface da Web para iniciar requisições HTTP assíncronas.

fetch('/api/users').then(res => res.json())

Extrai valores de arrays e atribui a variáveis correspondentes.

const [a, b, c] = [1, 2, 3]

Captura o primeiro valor em uma variável e o restante em um novo array.

const [primeiro, ...resto] = [1, 2, 3, 4]

Ignora valores desejados na posição inicial da desestruturação.

const [, , terceiro] = [1, 2, 3]

Define um valor padrão para uma variável se o valor correspondente no array for undefined.

const [x = 0] = []

Extrai propriedades de objetos e atribui a variáveis com nomes iguais ou diferentes.

const { nome, idade } = { nome: "João", idade: 25 }

Permite que a variável de destino tenha um nome diferente da propriedade do objeto.

const { nome: userName, idade: age } = obj

Define um valor padrão para uma propriedade se o objeto não tiver a propriedade ou o valor for undefined.

const { nome = "Anônimo" } = {}

Captura todas as propriedades restantes do objeto em uma nova variável.

const { nome, ...resto } = obj

Permite extrair valores de objetos dentro de outros objetos.

const { usuario: { nome } } = data

Permite criar uma cópia de um array ou adicionar novos elementos.

const arr2 = [...arr1, 3, 4]

Cria uma cópia de um objeto e permite sobrescrever propriedades.

const obj2 = { ...obj1, c: 3 }

Cria uma nova instância de objeto com propriedades idênticas.

const copia = { ...original }

Cria um novo objeto com propriedades de ambos, onde as propriedades de obj2 sobrescrevem as de obj1.

const merged = { ...obj1, ...obj2 }

Permite extrair propriedades diretamente dos argumentos da função.

function processar({ nome, idade }) { ... }

Permite strings multi-linha e interpolação de expressões usando a crase (`) em vez de aspas.

const mensagem = `Olá, ${nome}!`

Permite criar strings que abrangem múltiplas linhas sem precisar de caracteres de escape de nova linha.

const multiline = `Linha 1Linha 2`

Exporta uma função específica para ser importada por nome em outro módulo.

const soma = (a, b) => a + b

Exporta uma função padrão para um módulo, que pode ser importada com qualquer nome.

export default function() {}

Importa uma função específica exportada por nome de um módulo.

import { soma } from './utils.js'

Importa o valor padrão exportado de um módulo.

import utils from './utils.js'

Importa todo o conteúdo de um módulo como um único objeto com propriedades.

import * as utils from './utils.js'

Define uma classe para criar objetos com propriedades e métodos.

class Pessoa { constructor(nome) { this.nome = nome } }

Permite criar uma nova classe que herda propriedades e métodos de uma classe pai.

class Funcionario extends Pessoa { constructor(nome, cargo) { super(nome); ... } }

Cria um valor primitivo simbólico e único, que geralmente serve como chave de propriedade.

const id = Symbol('id')

Permite iterar sobre dados que implementam o protocolo iterador.

for (const val of obj) console.log(val)

Retorna o elemento que corresponde ao ID fornecido na página.

document.getElementById('meu-id')

Retorna o primeiro elemento dentro do documento que corresponde ao seletor CSS especificado.

document.querySelector('.classe')

Retorna uma NodeList estática com todos os elementos que correspondem ao seletor CSS.

document.querySelectorAll('div')

Retorna uma HTMLCollection de elementos com a classe fornecida.

document.getElementsByClassName('classe')

Retorna uma HTMLCollection de elementos com a tag fornecida.

document.getElementsByTagName('p')

Define o texto contido no nó. Escapa caracteres HTML para evitar injeção de script.

element.textContent = "Texto"

Define o HTML interno do elemento. Não escapa caracteres, permitindo HTML válido.

element.innerHTML = "<strong>HTML</strong>"

Define o valor de um elemento de formulário (input, select, textarea).

element.value = "valor"

Retorna o valor de um atributo HTML especificado.

element.getAttribute('data-id')

Define o valor de um atributo HTML especificado.

element.setAttribute('data-id', '123')

Define o estilo CSS diretamente no elemento como propriedade de estilo.

element.style.color = 'red'

Adiciona uma ou mais classes CSS ao elemento especificado.

element.classList.add('ativa')

Remove uma ou mais classes CSS do elemento especificado.

element.classList.remove('ativa')

Adiciona a classe se não existir, ou remove se existir.

element.classList.toggle('ativa')

Retorna true se o elemento possuir a classe especificada.

element.classList.contains('ativa')

Cria um novo elemento HTML com a tag especificada.

const div = document.createElement('div')

Adiciona um nó como o último filho do elemento pai.

document.body.appendChild(div)

Remove o elemento do DOM.

element.remove()

Registra uma função de callback a ser executada sempre que o evento ocorrer.

element.addEventListener('click', (e) => { ... })

Remove um listener de evento registrado anteriormente.

element.removeEventListener('click', handler)

Registra uma mensagem no console de depuração.

console.log('mensagem')

Registra uma mensagem de erro no console com ícone vermelho.

console.error('erro')

Registra um aviso de advertência no console com ícone amarelo.

console.warn('aviso')

Registra uma mensagem informativa no console com ícone azul.

console.info('info')

Exibe uma tabela tabular de dados no console para visualização fácil.

console.table([{a:1}, {a:2}])

Inicia um grupo de logs no console para organização visual.

console.group('grupo')

Encerra o grupo de logs iniciado anteriormente.

console.groupEnd()

Inicia um temporizador no console. O tempo decorrido é calculado desde a chamada até `timeEnd`.

console.time('timer')

Para o temporizador e imprime o tempo decorrido no console.

console.timeEnd('timer')

Pausa a execução do script e abre as ferramentas de desenvolvedor do navegador.

function debugar() { debugger }

Retorna um valor de timestamp de alta precisão (em milissegundos) desde a época.

performance.now()

Cria uma marca de tempo de alto nível no timeline de performance.

performance.mark('start')

Cria uma medição entre duas marcas de tempo.

performance.measure('diff', 'start', 'end')