Modern JavaScript Best Practices
TL;DR
A complete, up-to-date breakdown of modern JavaScript for developers and founders. It covers the core ideas, the trade-offs that matter, a practical workflow, real numbers, and the questions people ask most — written to be skimmed, applied, and shared.
Key takeaways
- async/await is syntactic sugar over promises that makes asynchronous code read like synchronous code without blocking the thread.
- Break long tasks into smaller chunks and yield to the main thread to keep interfaces responsive.
- Memory leaks usually trace back to lingering references: forgotten timers, detached DOM nodes, and unbounded caches.
- A closure is a function bundled with references to its surrounding lexical scope, letting it remember variables after the outer function returns.
- Promise callbacks are microtasks and always run before the next macrotask such as a setTimeout callback.
This is a practical, up-to-date guide to Modern JavaScript — what it is, why it matters in 2026, and how to apply it in real projects. It is written for developers and founders who want clear answers and proven best practices, not filler.
Whether you're just starting out or leveling up, treat this as a working reference you can return to. Every section is built to be skimmed, applied, and shared.
When Should You Use Promises vs Callbacks?
Callbacks are still appropriate for simple, synchronous-style APIs and for event handlers that fire many times. For one-shot asynchronous results, promises and async/await are almost always the better choice: they flatten nesting, propagate errors predictably, and compose with combinators.
Promises shine when coordinating multiple operations:
Promise.allwaits for everything and rejects fast on the first failure.Promise.allSettledwaits for all results regardless of failures.Promise.raceresolves with the first settled promise.Promise.anyresolves with the first success, ignoring rejections.
The classic "callback hell" of deeply nested handlers disappears once you return promises and chain or await them. Mixing both styles in one flow, however, is a frequent source of swallowed errors.
What Is a JavaScript Closure?
A closure is created every time a function is defined: the function keeps a live reference to the variables in the scope where it was declared, not where it is called. Because the inner function holds that reference, those variables survive after the outer function has returned. This is the mechanism behind data privacy, function factories, and stable callbacks.
A practical example is a counter:
function makeCounter() {
let count = 0;
return () => ++count;
}
const next = makeCounter();
next(); // 1
next(); // 2
The returned arrow function closes over count. Each makeCounter() call produces an independent count, so two counters never interfere. Closures are not copies of values; they share the actual binding, which is why loop variables declared with var historically caused surprises that let fixes.
What Is the Difference Between Microtasks and Macrotasks?
Macrotasks include setTimeout, setInterval, message events, and I/O callbacks. Microtasks include promise .then/.catch/.finally reactions, queueMicrotask, and await continuations. The defining rule: after each macrotask, the engine drains the microtask queue completely before the next macrotask or paint.
- Microtasks have higher priority and can starve rendering if you enqueue them in an unbounded loop.
- One
setTimeout(fn, 0)waits for the next macrotask turn, so it always runs after pending promises. awaitsplits a function: code after it resumes as a microtask.
Knowing this prevents subtle bugs where state appears to update in the wrong order, and explains why heavy promise chains can delay visual updates.
How Do You Optimize JavaScript Performance?
The biggest wins come from doing less on the main thread, not from clever micro-optimizations. Profile first with the browser Performance panel or Lighthouse, find the long tasks, then attack them. Optimize for the metric users feel: Interaction to Next Paint should stay under 200 ms.
High-impact techniques:
- Break long tasks into chunks and yield with
scheduler.yield()orsetTimeout. - Move CPU-heavy work to a Web Worker so the UI thread stays free.
- Debounce or throttle high-frequency events like
scroll,resize, andinput. - Defer non-critical scripts and code-split large bundles.
- Batch DOM reads and writes to avoid layout thrashing.
Measure again after each change; assumptions about hotspots are often wrong.
How Do ES Modules Differ From CommonJS?
ES modules (ESM) are the standardized module system defined by ECMAScript and supported natively in browsers and Node.js. CommonJS (CJS) is Node's original system built on require and module.exports. The differences are not just syntax; they affect loading and tooling.
- ESM uses static
import/export, enabling tree shaking and dead-code elimination. - CJS uses dynamic
require, resolved synchronously at runtime. - ESM bindings are live read-only views; CJS exports are copied values.
- ESM is asynchronous and supports top-level
await; CJS is synchronous.
New projects should default to ESM for better static analysis and smaller bundles. Use dynamic import() to load code on demand, which also returns a promise and integrates cleanly with async/await.
Why Does My Async Code Run in an Unexpected Order?
Most ordering confusion comes from forgetting that await yields control. Everything before the first await runs synchronously; everything after resumes later as a microtask. Meanwhile, synchronous code that called the async function keeps executing first.
Consider:
console.log('A');
(async () => {
console.log('B');
await null;
console.log('D');
})();
console.log('C');
The output is A B C D. B runs synchronously, the function suspends at await, C runs, then the microtask resumes with D. Mapping out which lines run before and after each await resolves nearly all of these surprises without a debugger.
Modern JavaScript: Key Facts and Data
According to recent industry research and the official documentation linked below:
- ECMAScript is updated annually, with ES2025 being the edition ratified in June 2025 by Ecma International
- V8 powers Chrome, Node.js, Deno, and Edge, compiling JavaScript to machine code with its TurboFan and Maglev optimizing compilers
- Microtasks such as Promise callbacks drain completely after each task and before the next render, giving them priority over setTimeout callbacks
Quick-Reference Summary
A map of what this guide covers:
| Topic | What you'll learn |
|---|---|
| When Should You Use Promises vs Callbacks? | Callbacks are still appropriate for simple, synchronous-style APIs and for event handlers that fire many times. |
| What Is a JavaScript Closure? | A closure is created every time a function is defined |
| What Is the Difference Between Microtasks and Macrotasks? | Macrotasks include setTimeout, setInterval, message events, and I/O callbacks. |
| How Do You Optimize JavaScript Performance? | The biggest wins come from doing less on the main thread, not from clever micro-optimizations. |
| How Do ES Modules Differ From CommonJS? | ES modules (ESM) are the standardized module system defined by ECMAScript and supported natively in browsers and Node.js. |
| Why Does My Async Code Run in an Unexpected Order? | Most ordering confusion comes from forgetting that await yields control. |
How to Get Started with Modern JavaScript
A simple path that works:
- Learn the fundamentals of Modern JavaScript from primary sources, not just tutorials.
- Build one small, real project end to end.
- Get feedback, refactor, and add tests.
- Ship it publicly and document what you learned.
- Repeat with a slightly harder project each time.
Build It with a World-Class Full Stack Developer
Sandeep Kumar Chaudhary is a full stack world-class developer. If you want to turn this into a real, production-ready product, get in touch — message directly on WhatsApp at +9779802348957 for a fast, no-pressure consult.
You can also explore the projects already shipped to thousands of users, or start a conversation here.
Final Thoughts
async/await is syntactic sugar over promises that makes asynchronous code read like synchronous code without blocking the thread. The developers and teams who win in 2026 pair strong fundamentals with consistent shipping. Start small, stay curious, build in public, and revisit this guide as your skills grow.
Sources and Further Reading
Frequently Asked Questions
What is modern javascript?
A closure is created every time a function is defined: the function keeps a live reference to the variables in the scope where it was declared, not where it is called. Because the inner function holds that reference, those variables survive after the outer function has returned. This guide covers modern JavaScript end to end — core concepts, best practices, concrete data, and a step-by-step approach you can apply right away.
What is a closure in JavaScript in simple terms?
A closure is a function that remembers the variables from the scope where it was created, even after that outer scope has finished running. This lets the function keep private state between calls. Closures power patterns like counters, function factories, and data hiding, and they share the actual variable binding rather than a copy.
What is the fastest way to improve JavaScript performance?
Profile first, then reduce main-thread work. Break long tasks into smaller chunks, yield to the event loop, move CPU-heavy code to a Web Worker, and debounce or throttle frequent events. Defer and code-split large scripts. Optimize for Interaction to Next Paint under 200 ms rather than guessing at micro-optimizations.
How do I run async operations in parallel?
Start the operations without awaiting each one immediately, then await them together with `Promise.all`. For example, `await Promise.all([fetchA(), fetchB()])` runs both concurrently. Awaiting inside a loop serializes calls and is usually much slower. Use `Promise.allSettled` when you need every result even if some operations fail.
Should I use ES modules or CommonJS?
Prefer ES modules for new code. They are the language standard, use static `import`/`export` that enables tree shaking and smaller bundles, support top-level `await`, and run natively in browsers and modern Node.js. CommonJS with `require` is still common in older Node projects, but ESM is the forward-looking default.
Sandeep Kumar Chaudhary
Full Stack Software Developer· Nepal's SEO, AEO, GEO & AIO expert and share-market educator. More about me
