Engineering JavaScriptES2024Event Loop

JavaScript Pro

Modern JavaScript mastery: ES2024+ features, module systems, event loop internals, Web APIs, memory management, bundler configuration, and browser compatibility.

A deep JavaScript expert who understands the event loop, microtask queue, and browser rendering pipeline — not just the syntax. Covers ES2024+ features including Iterator helpers, Promise.withResolvers, and Temporal API, explains module system differences (CJS, ESM, IIFE), and diagnoses memory leaks using Chrome DevTools heap snapshots.

Added Mar 20, 2026

$npx skills add johnefemer/skillfish --skill javascript-pro

Capabilities Real Examples Get Started Models & Context Works Great With

What This Skill Can Do

Concrete capabilities you get when you install this skill.

Explain event loop, microtask queue, and rendering pipeline interactions

Diagnose memory leaks using Chrome DevTools heap snapshots and retainer trees

Configure Vite, Webpack, and Rollup for optimal bundle splitting and tree shaking

Apply ES2024+ features: Iterator helpers, groupBy, Temporal, Promise.withResolvers

Design module systems with proper CJS/ESM interop for libraries

Debug browser compatibility issues with Baseline status and feature detection

Real Conversations

See how the JavaScript Pro skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

I'm confused about the order Promise callbacks and setTimeout callbacks execute. Can you explain how the event loop processes these?

Agent

The JavaScript event loop processes tasks in this order every iteration:

One macrotask (e.g., setTimeout, setInterval, I/O callback, script execution)
All microtasks until the queue is empty (Promise callbacks, queueMicrotask, MutationObserver)
Render (if browser deems it necessary)
Repeat

console.log('1 - synchronous');

setTimeout(() => console.log('4 - macrotask'), 0);

Promise.resolve()
  .then(() => console.log('2 - microtask 1'))
  .then(() => console.log('3 - microtask 2'));

// Output: 1, 2, 3, 4

Why microtasks run before the next macrotask: After each macrotask, the engine drains the entire microtask queue before picking the next macrotask. This means chained .then() calls all run synchronously from the event loop's perspective — no other code can interleave.

Practical consequence:

// This blocks rendering — microtasks keep spawning
function infinitePromiseChain() {
  return Promise.resolve().then(infinitePromiseChain);
}
// The browser never gets to the render step

queueMicrotask vs Promise.resolve().then(): Both queue a microtask. Use queueMicrotask when you need low-level scheduling without creating a Promise object — it's slightly cheaper.

You

My single-page app grows from 50MB to 400MB RAM over 30 minutes of use. The team thinks it's a closure leak but isn't sure. How do I diagnose this?

Agent

Chrome DevTools heap snapshot comparison is the fastest way to find the leaked object type.

Step-by-step diagnosis:

Open DevTools → Memory → Heap snapshot. Take Snapshot 1 at baseline.
Use the app normally for 5 minutes.
Take Snapshot 2. Switch view to "Comparison" and sort by "# Delta" descending.
Look for objects with large positive deltas — these are accumulating and not being GC'd.

Common leak patterns in SPAs:

// A) Event listener not removed on component unmount
window.addEventListener('resize', handler); // ❌ Added every mount
// Fix: return cleanup from useEffect / beforeUnmount
useEffect(() => {
  window.addEventListener('resize', handler);
  return () => window.removeEventListener('resize', handler); // ✅
}, []);

// B) setInterval not cleared
const id = setInterval(tick, 1000); // interval holds closure → holds component
// Fix: clearInterval(id) on unmount

// C) WeakMap/Map used as a cache without eviction
const cache = new Map(); // Map holds strong references — grows forever
cache.set(domNode, heavyData); // domNode removed from DOM but Map keeps it alive
// Fix: use WeakMap (keys are weak references, GC can collect them)
const cache = new WeakMap(); // ✅

Shortcut for React apps: The React DevTools "Components" panel shows component count. If the count for unmounted route components keeps growing, you have an unmount cleanup issue — start there.

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Claude Sonnet 4 or GPT-4o for event loop and memory reasoning. Verify ES2024+ feature Baseline status for browser support requirements.

Context Window

SKILL.md ~4KB. Fits in 32K context; bundler configuration sessions benefit from 64K+ to hold full config files.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Works Great With

These skills complement JavaScript Pro for end-to-end coverage. Install them together for better results.

TypeScript Pro

Advanced TypeScript patterns: generics, conditional types, mapped types, module augmentation, declaration files, and strict-mode migration guides.

TypeScriptGenerics

React Specialist

Advanced React patterns: Server Components, Suspense, concurrent rendering, custom hooks, state management, and performance optimization guides.

ReactServer Components

Senior Frontend

React, Next.js, TypeScript, Tailwind CSS, accessibility, and performance.

FrontendReact

Playwright Pro

Production-grade Playwright testing toolkit with 55 templates and smart reporting.

TestingPlaywright

$ skillfish add johnefemer/skillfish --all # install all skills at once

Ready to try JavaScript Pro?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.