Modern JavaScript [2026]: ES2026 Features and Best Practices

JavaScript in 2026 looks nothing like it did five years ago. Between ES2022, ES2023, ES2024, and now ES2026 features landing in browsers, the language has become genuinely pleasant to write. If you learned JS a while back and haven't kept up, this guide covers what actually matters — no fluff, no framework wars, just the features and patterns that make modern JavaScript code cleaner and more reliable.

The ES2024–2026 Features That Actually Matter

Array.fromAsync lets you create arrays from async iterables without manual loops. Object.groupBy (ES2024) replaces dozens of reduce patterns for grouping arrays by key. Promise.withResolvers gives you resolve and reject functions without wrapping in a constructor. The pipeline operator (Stage 3) is coming — it lets you chain transformations like data |> filter |> transform |> render instead of nested calls or intermediate variables.

Iterator helpers (also Stage 3) add .map(), .filter(), and .take() directly on iterators so you can process large datasets lazily without building intermediate arrays.

Optional Chaining and Nullish Coalescing: Stop Writing Defensive Code

These two features alone eliminate hundreds of lines of defensive null checks in most codebases. Optional chaining (user?.address?.city) short-circuits to undefined if any link in the chain is null or undefined. Nullish coalescing (value ?? 'default') returns the right side only if the left is null or undefined — unlike || which also triggers on 0 and empty string.

Combined: const city = user?.address?.city ?? 'Unknown'. This replaces: const city = user && user.address && user.address.city ? user.address.city : 'Unknown'. Use these everywhere. They make code readable at a glance.

Async/Await Patterns That Professional Devs Actually Use

Basic async/await is table stakes. The patterns that separate good developers from great ones: Promise.allSettled for running multiple async operations where some might fail. Promise.any for racing multiple sources and taking the first success. Top-level await in ES modules so you can fetch data at module initialization without wrapping in an async IIFE.

Error handling pattern worth adopting: wrap await in a utility that returns [error, result] tuples instead of try/catch blocks everywhere. This is the "go-style" error handling pattern and it keeps async functions readable without swallowing errors.

async function safeAwait(promise) {
  try {
    return [null, await promise];
  } catch (e) {
    return [e, null];
  }
}
const [err, data] = await safeAwait(fetchUser(id));
if (err) return handleError(err);

ES Modules: The Standard That Finally Stuck

ES modules (import/export) are now the standard everywhere — browsers, Node.js, Deno, Bun. Stop starting new projects with CommonJS (require()). Named exports are preferable to default exports for anything that will be imported in multiple places — they allow better tree-shaking and explicit naming at the import site. Dynamic imports (import()) enable code splitting: load heavy modules only when needed rather than upfront.

For bundlers: Vite has won the dev tooling race. It uses native ES modules in development for near-instant hot reload and Rollup for optimized production builds. If you're still on Webpack for new projects, there's no compelling reason to stay.

TypeScript: Not Optional Anymore

TypeScript adoption crossed 80% among professional JavaScript developers. The setup cost is minimal and the payoff — catching bugs at compile time, better IDE autocomplete, self-documenting function signatures — is enormous. Key patterns: use interface for object shapes you might extend, type for unions and intersections. Avoid any — use unknown when you genuinely don't know the type, then narrow it. Use as const for configuration objects to get literal types instead of widened primitives. Utility types like Partial<T>, Required<T>, Pick<T, K>, and Omit<T, K> eliminate boilerplate type definitions.

Performance Patterns Every JS Developer Should Know

Debounce and throttle are table stakes for event handlers. Beyond that: use requestAnimationFrame for visual updates, not setTimeout(fn, 0). Use IntersectionObserver for lazy loading instead of scroll event listeners. For heavy computation, consider Web Workers to move work off the main thread. Avoid layout thrashing — batch DOM reads before writes. WeakMap and WeakSet are memory-safe caches that don't prevent garbage collection. Virtual scrolling for lists with thousands of items — render only what's visible.