# Técnicas de JavaScript — onde e por quê > Tabela de referência: cada técnica usada no projeto, o arquivo que a > demonstra, o motivo prático e o suporte dos navegadores. > > **Legenda de suporte:** ✅ = amplo (todos os navegadores atuais) · 🟡 = moderno > (Chrome/Edge/Firefox/Safari atuais; verificar se precisar de IE11, que não é > suportado) · ⚠️ = recente/parcial (feature detection obrigatório). | Técnica | Arquivo | Por que usei aqui | Suporte | | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | -------------------------------- | | ES Modules nativos (`import`/`export`) | `src/main.js` (todos os módulos) | Sem bundler: o navegador resolve o grafo de imports; code-splitting grátis via `import()` | ✅ | | Dynamic `import()` | `src/main.js` → `carregarDemo()` | Lazy loading: baixa cada demo só quando a seção entra na viewport (Lighthouse 95+) | ✅ | | `import.meta.url` | `src/components/code-peek.js`, `src/main.js`, demos com worker | Resolve caminhos relativos ao módulo — funciona no GitHub Pages sem configuração | ✅ | | Closures | `src/demos/01-closures-hof.js`, `src/utils/debounce.js` | Estado privado sem classe/variável global (contador, timers pendentes) | ✅ | | Funções de ordem superior | `src/utils/compose.js`, `memoize.js` | Compor e cachear sem acoplar à lógica de negócio | ✅ | | `compose`/`pipe`/`curry` | `src/utils/compose.js` | Pipeline declarativa e aplicações parciais (demo 01) | ✅ | | Destructuring | `src/utils/format.js`, `src/core/store.js` | Extrai opções de objetos de configuração com defaults legíveis | ✅ | | Spread/rest | `src/core/store.js`, `src/core/dom.js` | Imutabilidade (`{ ...estado }`) e aceitar filhos variálicos em `h()` | ✅ | | Template literals | `src/core/dom.js`, `src/components/code-peek.js` | Strings multi-linha e interpolação segura (HTML estático only) | ✅ | | Tagged templates | `src/core/dom.js` (comentário/demo) | Mostrar que `fn\`...\`` permite validação/transformação do template | ✅ | | Optional chaining `?.` | em todo o código | Acesso defensivo a propriedades opcionais sem `&&` encadeado | ✅ | | Nullish coalescing `??` | `src/utils/*`, `src/core/*` | Default que **não** engole `0`/`''` (diferente de `\|\|`) | ✅ | | Atribuição lógica `??=`/`\|\|=`/`&&=` | demos e core | Atualização condicional compacta (ex.: flags de estado) | ✅ | | `Array.prototype` moderno (`at`, `findLast`, `toSorted`, `toSpliced`, `with`, `flatMap`) | demos 05/07/12, `src/core/*` | Operações imutáveis e legíveis sem `slice`/`concat` | 🟡 (`toSpliced`/`with` são 2023) | | `Object.groupBy`/`Map.groupBy` | `src/demos/07-generators-iterators.js` | Agrupar sem reduce manual; fallback via reduce quando ausente | ⚠️ (`Map.groupBy` 2024) | | `Object.entries`/`fromEntries` | `src/core/dom.js`, demo 09 | Converter objeto ↔ pares para formulários (`FormData`) | ✅ | | `structuredClone` | `src/utils/deep-clone.js`, demo 05 | Clone profundo nativo (ciclos, Date, Map); fallback recursivo incluso | ✅ | | `Map`/`Set`/`WeakMap`/`WeakSet`/`WeakRef` | `store.js`, `memoize.js`, demo 06 | Coleções com chaves de qualquer tipo; `WeakMap` p/ dados privados sem retenção | ✅ | | `Symbol` | `src/demos/06-classes-private-fields.js` | Chaves únicas invisíveis a `Object.keys` (métodos "ocultos") | ✅ | | `BigInt` | `src/demos/06-classes-private-fields.js` (exemplo) | Inteiros maiores que `Number.MAX_SAFE_INTEGER` sem perder precisão | ✅ | | `Promise.all` | `src/demos/02-async-fetch.js` | Carregar JSONs em paralelo (falha em um rejeita o conjunto) | ✅ | | `Promise.allSettled` | `src/demos/02-async-fetch.js` | Resultado parcial: mostrar sucesso e falhas sem abortar tudo | ✅ | | `Promise.race` + timeout | `src/demos/02-async-fetch.js` | Deadline: `race([fetch, AbortSignal.timeout])` evita travar em rede ruim | ✅ | | `AbortController`/`AbortSignal.timeout` | demo 02, `src/utils/sleep.js` | Cancelar requisições/espas ao trocar de seção (essencial p/ cleanup) | ✅ | | `async`/`await` | demos 02/07/08/09/13 | Fluxo assíncrono legível sem pirâmide de `.then` | ✅ | | Retry com backoff exponencial | `src/utils/retry.js` (demo 02) | Rede falha; `sleep` injetável torna o teste determinístico | ✅ | | Generators `function*` | `src/demos/07-generators-iterators.js` | Sequências sob demanda (fibonacci, paginação) sem alocar arrays | ✅ | | Async generators + `for await...of` | `src/demos/07-generators-iterators.js` | Consumir API paginada como stream, com `await` entre páginas | ✅ | | `Symbol.iterator` custom | `src/demos/07-generators-iterators.js` | Tornar objetos iteráveis por `for…of`/spread | ✅ | | Iterator helpers | `src/demos/07-generators-iterators.js` | `Iterator.prototype.map` onde suportado; fallback manual com detecção | ⚠️ (2025+) | | `Proxy`/`Reflect` | `src/demos/05-state-store.js` | Reatividade reativa: interceptar get/set e notificar mudanças | ✅ | | Classes + campos privados `#` | `src/demos/06-classes-private-fields.js` | Enculamento real na sintaxe (não convenção de comentário) | ✅ | | `static` blocks | `src/demos/06-classes-private-fields.js` | Inicializar dados estáticos no carregamento da classe | ✅ | | Mixins/composição vs herança | `src/demos/06-classes-private-fields.js` | Reuso flexível sem árvore de herança rígida | ✅ | | Custom Elements + Shadow DOM + `` | `src/components/*.js` | Componentes reutilizáveis com estilos encapsulados, sem framework | ✅ | | `