Cheat Sheet JavaScript ES6 e Programacao Assincrona

Prévia do material em texto

VOLUME 02 • GUIA PRÁTICO
JavaScript Moderno (ES6+) e Programação
Assíncrona
Manipulação de arrays, desestruturação, Promises e integração com Fetch API.
1. Recursos Essenciais do ES6+
Recurso Sintaxe Exemplo Caso de Uso Principal
Destructuring const { name, age } = user; Extração rápida de propriedades de objetos/arrays.
Spread/Rest
const copy = [...items,
newItem];
Imutabilidade de arrays e manipulação de
parâmetros.
Arrow
Functions
const add = (a, b) => a + b; Sintaxe sucinta e preservação do escopo this.
2. Métodos de Alta Ordem para Arrays
// Dados base const produtos = [ { id: 1, nome: "Teclado", preco: 150, emEstoque: true }, { 
id: 2, nome: "Mouse", preco: 80, emEstoque: false }, { id: 3, nome: "Monitor", preco: 900, 
emEstoque: true } ]; // Map: Transformação de dados const nomes = produtos.map(p => p.nome); 
// Filter: Filtragem condicional const disponíveis = produtos.filter(p => p.emEstoque); // 
Reduce: Acumulação de valores const totalEstoque = produtos.reduce((acc, p) => acc + 
p.preco, 0);
3. Programação Assíncrona: Async/Await & Fetch API
Tratamento moderno de operações I/O sem chamadas aninhadas de callbacks (Callback Hell).
async function carregarDadosUsuario(userId) { try { const response = await 
fetch(`https://api.exemplo.com/users/${userId}`); if (!response.ok) { throw new Error(`Erro 
na requisição: ${response.status}`); } const dados = await response.json(); return dados; } 
catch (erro) { console.error("Falha ao buscar usuário:", erro.message); } }
Desenvolvimento Front-End • Módulo 2 Página 1 de 1