# Guia de Referência: JavaScript Moderno para IA Referência operacional de **JavaScript moderno** baseada na documentação MDN e no Modern JavaScript Tutorial. O foco é ensinar a IA a distinguir a linguagem JavaScript das APIs do ambiente e a produzir código previsível, testável e seguro. --- ## 1. Contrato de execução para a IA - Trate este arquivo como **referência de decisão e implementação**, não como licença para aplicar toda tecnologia disponível. - Antes de codificar, declare o **ambiente** (browser, Node.js, worker, servidor, PWA etc.), os requisitos e as restrições de compatibilidade. - Prefira a solução nativa e simples quando ela atende aos requisitos com boa acessibilidade, segurança e manutenção. - Consulte compatibilidade antes de usar APIs experimentais ou de disponibilidade limitada. - Não misture responsabilidades: estrutura/semântica em HTML, apresentação em CSS, comportamento em JavaScript e capacidades do navegador em Web APIs. - Considere segurança, privacidade, performance e acessibilidade desde o design, não como correções finais. --- ## 2. Fundamentos da linguagem ### Tipos e valores - **Conceito:** Primitivos, objetos, `null`, `undefined`, `NaN`, `BigInt`, `Symbol` e coerção. - **Regra para IA:** Use `===`/`!==` por padrão, explicite conversões quando o domínio exigir e não confunda `null` com ausência não inicializada. ### Variáveis e escopo - **Conceito:** `const`, `let`, escopo léxico, temporal dead zone e closures. - **Regra para IA:** Use `const` por padrão e `let` quando houver reatribuição; evite `var` em código novo salvo interoperabilidade deliberada. ### Operadores e controle de fluxo - **Conceito:** Aritmética, comparação, lógicos, `??`, `?.`, ternário, loops e `switch`. - **Regra para IA:** Prefira fluxo legível e guard clauses; não comprima regras complexas em expressões difíceis de revisar. ### Funções - **Conceito:** Declarações, expressions, arrow functions, parâmetros default/rest, spread e funções de ordem superior. - **Regra para IA:** Escolha arrow quando não precisar de `this`/`arguments` próprios; dê nomes que expressem intenção e mantenha responsabilidade única. --- ## 3. Objetos, protótipos e classes ### Objetos - **Conceito:** Propriedades, descriptors, getters/setters, destructuring, spread, optional chaining. - **Regra para IA:** Modele dados coesos; não use objetos genéricos gigantes como estado global. ### Protótipos - **Conceito:** Cadeia de protótipos e herança prototípica. - **Regra para IA:** Entenda o mecanismo mesmo quando usar `class`; evite modificar prototypes globais de objetos nativos. ### Classes - **Conceito:** `class`, constructor, fields, private fields, static, extends/super. - **Regra para IA:** Favoreça composição quando herança cria acoplamento; mantenha invariantes dentro do objeto. --- ## 4. Coleções e iteração ### Arrays - **Conceito:** Métodos imutáveis/mutáveis, map/filter/reduce/find/some/every/sort. - **Regra para IA:** Escolha o método que comunica a intenção; cuidado com `sort()` mutável e comparadores. ### Map e Set - **Conceito:** Coleções com chaves/valores e unicidade. - **Regra para IA:** Use `Map` quando chaves não são apenas strings ou quando semântica de mapa é importante; `Set` para unicidade. ### Iterators e generators - **Conceito:** Protocolos iterable/iterator e `function*`. - **Regra para IA:** Use quando precisar de iteração lazy, streams lógicos ou sequências customizadas; não complexifique loops simples. --- ## 5. Erros e recursos ### Exceções - **Conceito:** `try/catch/finally`, `throw`, subclasses de Error e `cause`. - **Regra para IA:** Capture apenas onde puder recuperar, enriquecer contexto ou converter a falha; não silencie erros. ### Gerenciamento de recursos - **Conceito:** Cleanup em `finally`, AbortController e padrões de descarte. - **Regra para IA:** Toda operação cancelável/longa deve considerar cancelamento e cleanup de listeners/timers. --- ## 6. Assincronicidade ### Promises - **Conceito:** Estados, chaining, `Promise.all`, allSettled, race, any. - **Regra para IA:** Escolha combinador conforme semântica; trate rejeições e não crie `new Promise` ao redor de uma API que já retorna Promise. ### async/await - **Conceito:** Sintaxe para orquestrar Promises. - **Regra para IA:** Use para fluxo legível; execute em paralelo operações independentes em vez de aguardar sequencialmente sem necessidade. ### Event loop - **Conceito:** Call stack, tasks e microtasks. - **Regra para IA:** Evite bloquear a main thread; entenda que Promise callbacks são microtasks e timers não são temporizadores exatos. --- ## 7. Módulos ### ES Modules - **Conceito:** `import`/`export`, named/default exports, dynamic import. - **Regra para IA:** Prefira ESM; mantenha APIs de módulo pequenas, evite ciclos e use `import()` para lazy loading quando houver benefício mensurável. --- ## 8. Browser: DOM, eventos e formulários ### DOM - **Conceito:** Consulta, criação, alteração e remoção de nós. - **Regra para IA:** Prefira APIs seguras (`textContent`, createElement); evite `innerHTML` para conteúdo não confiável. ### Eventos - **Conceito:** Captura/bubble, delegation, `preventDefault`, `stopPropagation`, custom events. - **Regra para IA:** Use delegation para listas dinâmicas e preserve comportamento nativo; não pare propagação sem necessidade arquitetural. ### Formulários - **Conceito:** FormData, constraint validation, input/change/submit e controles. - **Regra para IA:** Use validação HTML como primeira camada e validação de negócio/servidor como autoridade. ### Carregamento - **Conceito:** DOMContentLoaded, load, async/defer, modules. - **Regra para IA:** Use `defer`/modules para scripts de aplicação e evite bloquear parsing sem motivo. --- ## 9. Rede e dados ### Fetch - **Conceito:** Request/Response/Headers, JSON, erros HTTP, AbortController. - **Regra para IA:** Cheque `response.ok`, trate timeout/cancelamento e não suponha que status HTTP 4xx/5xx rejeita a Promise. ### CORS - **Conceito:** Política de origem e headers negociados com servidor. - **Regra para IA:** Não “resolva CORS” no front-end; configure a política no servidor correto e com menor permissão. ### WebSocket e SSE - **Conceito:** Comunicação bidirecional persistente ou eventos unidirecionais do servidor. - **Regra para IA:** Escolha conforme direção, reconexão e semântica; implemente backoff e estado de conexão. ### Binários e arquivos - **Conceito:** ArrayBuffer, typed arrays, Blob, File, streams. - **Regra para IA:** Não converta grandes binários desnecessariamente para strings/base64; trabalhe em chunks quando possível. --- ## 10. Armazenamento ### Web Storage - **Conceito:** localStorage/sessionStorage síncronos e por origem. - **Regra para IA:** Use apenas para dados pequenos e não sensíveis; não armazene segredos/tokens de alto risco sem modelo de ameaça. ### IndexedDB - **Conceito:** Banco assíncrono transacional no navegador. - **Regra para IA:** Use para dados estruturados/offline maiores; crie migração de schema e tratamento de quota. --- ## 11. Web Components ### Custom Elements - **Conceito:** Elementos HTML definidos pela aplicação. - **Regra para IA:** Nome deve conter hífen; mantenha API por atributos/propriedades/eventos clara. ### Shadow DOM - **Conceito:** Encapsulamento de árvore/estilos. - **Regra para IA:** Use quando isolamento traz valor; pense em theming, acessibilidade e composição. ### Templates e slots - **Conceito:** `template`, `slot` e composição declarativa. - **Regra para IA:** Prefira templates para estruturas reutilizáveis e slots para conteúdo fornecido pelo consumidor. --- ## 12. Qualidade, segurança e performance ### Segurança - **Conceito:** XSS, eval/new Function, URLs, origem e dados não confiáveis. - **Regra para IA:** Nunca use `eval`/`new Function` com entrada externa; encode/renderize conforme contexto e use APIs DOM seguras. ### Testabilidade - **Conceito:** Funções puras, seams, injeção de dependência e testes por comportamento. - **Regra para IA:** Separe lógica de domínio de DOM/rede para testar sem ambiente pesado. ### Performance - **Conceito:** Main thread, layout, memória, listeners, batching e lazy loading. - **Regra para IA:** Meça com Performance APIs/DevTools; não micro-otimize sem evidência. --- ## Checklist de aceite 1. [ ] A tecnologia escolhida resolve um requisito real e foi aplicada no ambiente correto. 2. [ ] Semântica, acessibilidade e estados de teclado/foco foram revisados. 3. [ ] Entradas externas são tratadas como não confiáveis e saídas são renderizadas com segurança. 4. [ ] Erros, estados vazios, carregamento, offline/rede e cancelamento foram considerados quando aplicável. 5. [ ] Compatibilidade e fallback foram avaliados para recursos não Baseline/amplamente suportados. 6. [ ] O código não duplica APIs nativas ou responsabilidades de outra camada. 7. [ ] Performance foi medida quando a decisão tem impacto relevante. --- ## Prompt-base para IA ```text Use o guia "JavaScript Moderno para IA" anexado como contrato técnico. Analise meu requisito e escolha somente os conceitos necessários. Diga quais partes do guia serão aplicadas e por quê. Implemente com semântica, acessibilidade, segurança e compatibilidade. Não invente APIs. Ao final, revise a solução pelo checklist do guia. Contexto: [DESCREVA o sistema, stack/versões, ambiente e estado atual] Objetivo: [DESCREVA o resultado observável esperado] Restrições: [DESCREVA o que não pode mudar e os limites técnicos] ``` ### Como preencher os campos - **Contexto:** descreva sistema, stack/versões, arquitetura ou ambiente, estado atual e onde a mudança acontece. - **Objetivo:** descreva o resultado observável esperado — o que o usuário ou o sistema deve conseguir fazer ao final. - **Restrições:** descreva o que não pode mudar e os limites de compatibilidade, segurança, acessibilidade, performance, dependências e escopo. ### Exemplo preenchido ```text Contexto: SPA sem framework, usando ES Modules em navegadores modernos e dados JSON obtidos por uma API REST. Objetivo: Carregar registros com fetch, permitir cancelamento da requisição e exibir estados de carregamento e erro sem bloquear a interface. Restrições: Sem jQuery; usar APIs nativas; tratar AbortController e erros HTTP; evitar XSS ao inserir dados no DOM. ``` --- ## Fontes primárias - MDN JavaScript: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript - Modern JavaScript Tutorial: https://javascript.info/ - Tradução/repositório: https://github.com/javascript-tutorial/pt.javascript.info --- ## Catálogo detalhado de conceitos JavaScript para IA Esta seção transforma o mapa de estudo em um **índice de verificação para geração e revisão de código**. A IA deve usar o item como gatilho de decisão, não como obrigação de empregar a funcionalidade. ### Fundamentos 1. **Estrutura do código e statements** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 2. **Modo estrito** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 3. **Variáveis e constantes** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 4. **Tipos de dados** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 5. **Conversão de tipos** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 6. **Operadores matemáticos** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 7. **Comparações e igualdade** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 8. **Condicionais if/ternário** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 9. **Operadores lógicos** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 10. **Nullish coalescing ??** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 11. **Loops while/for** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 12. **switch** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 13. **Function Declaration** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 14. **Function Expression** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 15. **Arrow functions** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 16. **JavaScript specials e semântica básica** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Qualidade de código 17. **Debugging no navegador** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 18. **Estilo de código** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 19. **Comentários úteis** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 20. **Ninja code como antipadrão** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 21. **Testes automatizados** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 22. **Polyfills e transpilation** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Objetos — básico 23. **Criação e propriedades** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 24. **Computed properties** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 25. **Property shorthand** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 26. **Checagem de existência** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 27. **for...in** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 28. **Referências e cópia** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 29. **Clonagem rasa** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 30. **Object.assign** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 31. **Garbage collection** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 32. **Métodos e this** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 33. **Arrow functions e this** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 34. **Constructor/new** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 35. **Optional chaining** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 36. **Symbol** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 37. **Conversão objeto→primitivo** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Tipos e coleções 38. **Métodos de primitive wrappers** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 39. **Number** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 40. **String** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 41. **Array** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 42. **Array methods** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 43. **Iterables** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 44. **Map e Set** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 45. **WeakMap e WeakSet** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 46. **Object.keys/values/entries** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 47. **Destructuring** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 48. **Date e time** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 49. **JSON parse/stringify** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Funções avançadas 50. **Recursion e stack** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 51. **Rest parameters** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 52. **Spread syntax** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 53. **Closure** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 54. **Lexical Environment** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 55. **var legado** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 56. **Global object** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 57. **Function object** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 58. **Named Function Expression** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 59. **new Function** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 60. **setTimeout/setInterval** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 61. **Decorators de função** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 62. **call/apply** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 63. **bind** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 64. **Arrow functions revisadas** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Objetos avançados 65. **Property flags/descriptors** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 66. **Getters/setters** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 67. **Prototype chain** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 68. **F.prototype** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 69. **Native prototypes** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 70. **Prototype methods e __proto__ legado** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Classes 71. **Class syntax** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 72. **Class inheritance** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 73. **Static properties/methods** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 74. **Private/protected properties** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 75. **Extending built-ins** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 76. **instanceof** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 77. **Mixins** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Erros 78. **try/catch** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 79. **Error objects** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 80. **Custom errors** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 81. **Error cause** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 82. **finally** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 83. **Global/unhandled errors** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Promises e async 84. **Callbacks** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 85. **Promise** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 86. **then/catch/finally** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 87. **Promise chaining** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 88. **Error handling em promises** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 89. **Promise API combinators** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 90. **Promisification** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 91. **Microtasks** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 92. **async/await** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 93. **Top-level await conforme ambiente** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Generators e iteração 94. **Generators** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 95. **Iterable generators** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 96. **Async iteration** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 97. **Async generators** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Módulos 98. **Export/import** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 99. **Default export** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 100. **Re-export** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 101. **Dynamic import** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 102. **Module scripts no browser** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 103. **Ciclos de dependência** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### DOM e documento 104. **Browser environment** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 105. **DOM tree** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 106. **Nodes e node types** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 107. **Seletores querySelector** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 108. **Node properties** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 109. **Attributes vs properties** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 110. **Modificação do documento** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 111. **Styles/classes** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 112. **Element size/scroll** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 113. **Window size/scroll** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 114. **Coordinates** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 115. **DocumentFragment** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 116. **Template cloning** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Eventos 117. **Event basics** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 118. **Event handlers** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 119. **Event object** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 120. **Bubbling/capturing** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 121. **Event delegation** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 122. **Browser default actions** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 123. **Custom events** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 124. **Mouse events** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 125. **Pointer events** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 126. **Keyboard events** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 127. **Scrolling** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 128. **Touch/pointer strategy** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 129. **Focus events** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Forms 130. **Form properties/methods** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 131. **Input/select/textarea** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 132. **focus/blur** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 133. **change/input** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 134. **cut/copy/paste** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 135. **submit** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 136. **FormData** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 137. **Constraint Validation API** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Carregamento e recursos 138. **DOMContentLoaded** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 139. **load** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 140. **beforeunload** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 141. **Scripts async** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 142. **Scripts defer** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 143. **Module loading** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 144. **Resource onload/onerror** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Browser avançado 145. **MutationObserver** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 146. **Selection/Range** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 147. **IntersectionObserver** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 148. **ResizeObserver** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 149. **Page visibility** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 150. **History API** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 151. **URL/URLSearchParams** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 152. **Fullscreen** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 153. **Clipboard** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Frames e janelas 154. **Popups/windows** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 155. **Cross-window communication** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 156. **Same-origin policy** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 157. **postMessage** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 158. **Clickjacking e proteção** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 159. **iframe sandbox** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Dados binários e arquivos 160. **ArrayBuffer** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 161. **TypedArray** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 162. **DataView** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 163. **TextEncoder/TextDecoder** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 164. **Blob** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 165. **File/FileReader** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 166. **Object URLs** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Rede 167. **Fetch** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 168. **Fetch options** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 169. **Headers** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 170. **FormData upload** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 171. **Download progress via streams** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 172. **AbortController** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 173. **CORS** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 174. **WebSocket** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 175. **Server-Sent Events** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 176. **Long polling quando necessário** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Storage e offline 177. **Cookies** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 178. **document.cookie limitações** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 179. **localStorage** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 180. **sessionStorage** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 181. **IndexedDB** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 182. **Cache API** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 183. **Service Worker** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 184. **Storage quotas/persistence** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Animação 185. **CSS transitions** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 186. **CSS animations** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 187. **requestAnimationFrame** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 188. **Web Animations API** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 189. **prefers-reduced-motion** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Web Components 190. **Custom elements** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 191. **Autonomous vs customized built-in** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 192. **Shadow DOM** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 193. **Template element** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 194. **Slots e composition** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 195. **Shadow DOM styling** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 196. **Events through Shadow DOM** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 197. **Lifecycle cleanup** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### RegExp 198. **Patterns e flags** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 199. **Character classes** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 200. **Unicode e property escapes** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 201. **Anchors** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 202. **Sets/ranges** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 203. **Quantifiers** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 204. **Greedy/lazy** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 205. **Capturing groups** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 206. **Backreferences** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 207. **Alternation** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 208. **Lookahead/lookbehind** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 209. **Catastrophic backtracking** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Performance e segurança 210. **Main thread budgeting** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 211. **Debounce/throttle quando necessário** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 212. **Avoid forced synchronous layout** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 213. **Memory leaks/listeners** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 214. **Lazy import/loading** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 215. **XSS e DOM sinks** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 216. **eval/new Function como risco** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 217. **Prototype pollution awareness** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 218. **Validação de dados de rede** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. 219. **CSP como camada de defesa** — ao usar este conceito, declarar por que ele é necessário, em qual ambiente executa, quais efeitos colaterais produz e como será testado. ### Regras de seleção para o catálogo - Se **HTML ou CSS nativo** resolve o comportamento, não introduza JavaScript apenas para controlar apresentação. - Se o item é uma **Web API**, verifique disponibilidade, permissões e contexto seguro antes de usar. - Para I/O assíncrono, defina timeout/cancelamento, erro e estado de loading. - Para código de domínio, mantenha dependências de DOM/rede em adaptadores para facilitar testes. - Para dados não confiáveis, defina validação e sink seguro antes da renderização.