Guia completo de JavaScript ES6+ para desenvolvimento moderno
📖 Definição
JavaScript é uma linguagem de programação de alto nível, interpretada e multi-paradigma. É a linguagem padrão da web, executada em navegadores e também em servidores (Node.js).
💪 Por que aprender?
• Essencial para desenvolvimento web
• Frontend e Backend com Node.js
• Ecossistema mais ativo do mundo
• Mobile com React Native
• Desktop com Electron
🚀 O que você pode fazer?
• Aplicações web interativas
• APIs e servidores REST
• Aplicações mobile e desktop
• Automação e scripts
• Machine Learning com TensorFlow.js
React, Vue, Angular
Node.js, Express
React Native
TypeScript, ES6+
🔤 Variáveis e Tipos
Use quando: Declarando variáveis, trabalhando com dados ou convertendo tipos
📋Declaração de Variáveis
const nome = "João"# Constante (não pode reatribuir)
let idade = 25# Variável (pode reatribuir)
var antigo = "evitar"# Escopo de função (evitar)
📋Tipos Primitivos
typeof "texto"# string
typeof 42# number
typeof true# boolean
typeof null# object (bug histórico)
typeof undefined# undefined
typeof Symbol()# symbol
typeof 42n# bigint
📋Conversão de Tipos
Number("123")# Para número
String(123)# Para string
Boolean(1)# Para boolean
parseInt("42px")# Extrai número
parseFloat("3.14")# Decimal
📋 Arrays e Métodos
Use quando: Trabalhando com listas de dados, processamento de arrays
📋Criar Arrays
const arr = [1, 2, 3]# Literal
const arr = new Array(1, 2, 3)# Construtor
const arr = Array.of(1, 2, 3)# Método estático
const arr = Array(5).fill(0)# Array com valores
📋Métodos Essenciais
arr.push(4)# Adiciona no fim
arr.pop()# Remove do fim
arr.unshift(0)# Adiciona no início
arr.shift()# Remove do início
arr.slice(1, 3)# Fatia (não modifica)
arr.splice(1, 2)# Remove/insere (modifica)
📋Iteração Moderna
arr.forEach(item => console.log(item))# Executa função
arr.map(item => item * 2)# Transforma
arr.filter(item => item > 2)# Filtra
arr.reduce((acc, item) => acc + item, 0)# Reduz
arr.find(item => item > 2)# Encontra primeiro
arr.findIndex(item => item > 2)# Índice do primeiro
arr.some(item => item > 2)# Algum satisfaz
arr.every(item => item > 0)# Todos satisfazem
🏗️ Objetos e Propriedades
Use quando: Estruturando dados, modelos, configurações
📋Criar Objetos
const obj = { nome: "João", idade: 25 }# Literal
const obj = new Object()# Construtor
const obj = Object.create(null)# Sem protótipo
📋Propriedades
obj.nome# Notação ponto
obj["nome"]# Notação colchete
obj.chaveDinamica# Variável como chave
delete obj.idade# Remove propriedade
📋Métodos Úteis
Object.keys(obj)# Array de chaves
Object.values(obj)# Array de valores
Object.entries(obj)# Array de pares
Object.assign({}, obj1, obj2)# Mescla objetos
{ ...obj1, ...obj2 }# Spread operator
Object.freeze(obj)# Congela objeto
Object.seal(obj)# Sela objeto
📋Propriedades Avançadas
const obj = { [chave]: "valor",# Chave computada
metodo() { return "oi" },# Método shorthand
get prop() { return this._prop },# Getter
set prop(val) { this._prop = val }# Setter
}⚡ Funções Modernas
Use quando: Reutilizando código, programação funcional, callbacks
📋Declaração de Funções
function soma(a, b) { return a + b }# Function declaration
const soma = function(a, b) { return a + b }# Function expression
const soma = (a, b) => a + b# Arrow function
const soma = (a, b) => ({ resultado: a + b })# Return objeto
📋Parâmetros Avançados
function soma(...numeros) {# Rest parameters
return numeros.reduce((a, b) => a + b, 0)}soma(1, 2, 3, 4)# Chama com múltiplos
const nums = [1, 2, 3]soma(...nums)# Spread operator
📋Parâmetros Padrão
function saudar(nome = "Visitante") { return `Olá, ${nome}!`}saudar()# "Olá, Visitante!"
saudar("Maria")# "Olá, Maria!"
📋Higher Order Functions
const multiplicar = fator => num => num * fator# Currying
const dobrar = multiplicar(2)dobrar(5)# 10
const aplicar = (fn, valor) => fn(valor)# Função de ordem superior
⏱️ Programação Assíncrona
Use quando: Requisições HTTP, operações I/O, timers, eventos
📋Promises
const promise = new Promise((resolve, reject) => { setTimeout(() => resolve("Sucesso!"), 1000)})promise.then(result => console.log(result))# Sucesso
promise.catch(error => console.error(error))# Erro
promise.finally(() => console.log("Finalizado"))# Sempre
📋Async/Await
async function buscarDados() { try { const response = await fetch('/api/dados') const dados = await response.json() return dados } catch (error) { console.error("Erro:", error) }}📋Promise Utils
Promise.all([p1, p2, p3])# Todas resolvem
Promise.race([p1, p2])# Primeira que resolver
Promise.allSettled([p1, p2])# Todas finalizam
Promise.any([p1, p2])# Primeira sucesso
📋Fetch API
fetch('/api/users') .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err))🎯 Destructuring & Spread
Use quando: Extraindo valores de objetos/arrays, parâmetros de função
📋Array Destructuring
const [a, b, c] = [1, 2, 3]# Básico
const [primeiro, ...resto] = [1, 2, 3, 4]# Com rest
const [, , terceiro] = [1, 2, 3]# Ignorando valores
const [x = 0] = []# Valor padrão
📋Object Destructuring
const { nome, idade } = { nome: "João", idade: 25 }# Básico
const { nome: userName, idade: age } = obj# Renomeando
const { nome = "Anônimo" } = {}# Valor padrão
const { nome, ...resto } = obj# Rest operator
const { usuario: { nome } } = data# Aninhado
📋Spread Operator
const arr1 = [1, 2]const arr2 = [...arr1, 3, 4]# Array spread
const obj1 = { a: 1, b: 2 }const obj2 = { ...obj1, c: 3 }# Object spread
const copia = { ...original }# Shallow copy
const merged = { ...obj1, ...obj2 }# Merge objetos
📋Parâmetros com Destructuring
function processar({ nome, idade }) { console.log(`${nome} tem ${idade} anos`)}processar({ nome: "Maria", idade: 30 })🚀 ES6+ Features
Use quando: Código moderno, organização, programação orientada a objetos
📋Template Literals
const nome = "João"const mensagem = `Olá, ${nome}!`# Interpolação
const multiline = `Linha 1Linha 2Linha 3`# Multiline
📋Modules
// utils.jsexport const soma = (a, b) => a + b# Named export
export default function() {}# Default export
// main.jsimport { soma } from './utils.js'# Named import
import utils from './utils.js'# Default import
import * as utils from './utils.js'# Namespace
📋Classes
class Pessoa { constructor(nome) { this.nome = nome } saudar() { return `Olá, ${this.nome}!` }}class Funcionario extends Pessoa {# Herança
constructor(nome, cargo) { super(nome)# Chama construtor pai
this.cargo = cargo }}📋Symbols e Iterators
const id = Symbol('id')# Symbol único
const obj = { [id]: 123 }# Propriedade symbol
obj[Symbol.iterator] = function*() {# Iterator
yield 1; yield 2; yield 3}for (const val of obj) console.log(val)# For...of
🌐 Manipulação DOM
Use quando: Interatividade web, formulários, SPAs, manipulação UI
📋Selecionar Elementos
document.getElementById('meu-id')# Por ID
document.querySelector('.classe')# Primeiro match
document.querySelectorAll('div')# Todos matches
document.getElementsByClassName('classe')# Por classe
document.getElementsByTagName('p')# Por tag
📋Manipular Conteúdo
element.textContent = "Texto"# Texto seguro
element.innerHTML = "<strong>HTML</strong>"# Com HTML
element.value = "valor"# Form inputs
element.getAttribute('data-id')# Atributo
element.setAttribute('data-id', '123')# Set atributo
📋Estilos e Classes
element.style.color = 'red'# Estilo inline
element.classList.add('ativa')# Adicionar classe
element.classList.remove('ativa')# Remover classe
element.classList.toggle('ativa')# Toggle classe
element.classList.contains('ativa')# Verificar classe
📋Criar e Remover Elementos
const div = document.createElement('div')# Criar
div.textContent = 'Novo elemento'document.body.appendChild(div)# Adicionar
element.remove()# Remover elemento
parent.removeChild(child)# Remover filho
📋Eventos
element.addEventListener('click', (e) => {# Adicionar evento
console.log('Clicado!', e.target)})element.removeEventListener('click', handler)# Remover evento
element.dispatchEvent(new Event('custom'))# Disparar evento
🐛 Debugging & Ferramentas
Use quando: Desenvolvendo, testando, otimizando performance
💡 💡 Use console.table() para visualizar arrays de objetos de forma organizada. Use console.group() para organizar logs relacionados.
📋Console Methods
console.log('mensagem')# Log básico
console.error('erro')# Erro
console.warn('aviso')# Aviso
console.info('info')# Informação
console.table([{a:1}, {a:2}])# Tabela
console.group('grupo')# Agrupar logs
console.groupEnd()# Fechar grupo
console.time('timer')# Iniciar timer
console.timeEnd('timer')# Finalizar timer
📋Debugger Statement
function debugar() { debugger# Ponto de parada
console.log('Continuando...')}📋Performance
console.time('loop')for (let i = 0; i < 1000000; i++) {}console.timeEnd('loop')# Medir tempo
performance.now()# Timestamp preciso
performance.mark('start')# Marca
performance.mark('end')performance.measure('diff', 'start', 'end')# Medir
📋Memory & Profiling
console.memory# Info memória
performance.getEntriesByType('navigation')# Navigation timing
window.getComputedStyle(element)# Estilos calculados
🤝 Contribuindo
Encontrou um erro? Quer melhorar um cheatsheet? Tem uma sugestão? Adoraríamos suas contribuições! Abra uma issue ou submeta um PR.
Gostou do projeto? Apoie o desenvolvimento com um café e ajude a manter tudo open source ☕