What to Know About JavaScript in 2026

We’ve done posts like this for CSS, but JavaScript deserves the same dangnabit! Especially as JavaScript does a better job of versioning itself anyway. We’ll cover new stuff in the language itself, but being a JavaScript practitioner involves more than the language itself, extending into runtimes, frameworks, libraries, and tooling. Let’s just do this, you’ve probably scrolled down already anyway.

What’s New in the Language

JavaScript has yearly version releases, which is a pretty nice way of doing things if you ask me!

ECMAScript 2025

The latest is ECMAScript 2025, which came out in June 2025, and the whole spec of that version is available.

Iterator Helpers

There are now methods like .map(), .filter(), .take(), .drop() directly on iterators with lazy evaluation. Honestly, to a mostly front-end guy like me, this feels a bit esoteric. Like, we already can map over arrays, so what’s the big deal? But I do understand performance, and that’s one aspect here.

const result = array .map(x => x * 2) // creates a new array in memory .filter(x => x > 10) // ... and again .slice(0, 3); // ... and againCode language: JavaScript (javascript)

So that’s “slow” and “memory intensive”, especially if the array is quite large and the things you’re doing are “expensive” as they say. The fancy new way is like this:

const result = Iterator.from(array) .map(x => x * 2) .filter(x => x > 10) .take(3) .toArray(); // No new arrays created, computation stops after 3Code language: JavaScript (javascript)

And as a nice bonus, that whole Iterator.from() thing works on anything iterable. So not just arrays, but sets, maps, generators, etc, which means they all get the same nice set of functions to use.

Set Methods

Sets are kinda nice in JavaScript as it’s like an array only each item is guaranteed to be unique. That’s nothing new, but if you have two sets, now we have methods for returning interesting things about them, like what overlaps, what doesn’t, etc.

const youKnow = new Set(["JS", "Python", "CSS", "SQL"]); const jobNeeds = new Set(["JS", "TypeScript", "Python"]);

// Skills the job wants that you already have youKnow.intersection(jobNeeds); // → Set {"JS", "Python"}

// Everything combined — your full stack + job needs youKnow.union(jobNeeds); // → Set {"JS", "Python", "CSS", "SQL", "TypeScript"}

// What the job needs that you DON'T know yet (skill gaps) jobNeeds.difference(youKnow); // → Set {"TypeScript"}

// Skills you have that the job doesn't care about youKnow.difference(jobNeeds); // → Set {"CSS", "SQL"}

// Skills that appear in only one set, not both youKnow.symmetricDifference(jobNeeds); // → Set {"CSS", "SQL", "TypeScript"}

// Are all job requirements a subset of what you know? jobNeeds.isSubsetOf(youKnow); // → false

// Do you have every skill and more? youKnow.isSupersetOf(jobNeeds); // → false

// Do you and the job have zero overlap? youKnow.isDisjointFrom(jobNeeds); // → falseCode language: JavaScript (javascript)

Pretty useful, I’d say. Claude Code had fun producing an interactive demo from that.

RegEx Updates

Lemme set the stage here. You’re building an on-page search function where your users type in their own search terms. And you want to implement this as a RegEx search. There is some danger there, as some characters a user may type in are “special” characters in RegExs, like how a $ matches the last character or whatever. So if the user searches for $9 and you just dunk that into a RegEx, it would break. Which characters you need to “escape” to fix that are specific to the implementation of RegEx at hand.

So! After apparently a 15-year journey, there is now RegExp.escape().

const query = userInput; // e.g. "$5.00 (off!)"

// ❌ BEFORE — breaks for any regex special chars const badRe = new RegExp(query, "g");

// ✅ ES2025 — one method, problem solved const goodRe = new RegExp(RegExp.escape(query), "g");Code language: JavaScript (javascript)

Again, Claude Code kinda knocked it out of the park with quite a good demo.

There has also been an update to how “flags” can work inside a RegEx. I feel like a super common one is that “i” flag, meaning case-insensitive. So you’d have a RegEx that ended in like /i meaning the whole thing is case-insensitive. But what if you only wanted part of a RegEx to be case-insensitive? Now you can wrap parts of it in parentheses and add those flags at the beginning.

// Old way — you couldn't mix case sensitivity /[a-z]+@[A-Z]+/i // 'i' flag applies to EVERYTHING

// ES2025 — inline modifiers per-group /(?i:[a-z.]+)@(?-i:[A-Z]+).(?i:com|org)/ //^^^^ case-insensitive part // ^^^^^ case-SENSITIVE part // ^^^ case-insensitive partCode language: JavaScript (javascript)

Promise Update

Everyone’s favorite asynchronous programming flow model (Promises) has a bit of an update with Promise.try() which can help simplify error handling. A function might error in a sync or async way, and you’d have to handle them separately, but now you can deal with it together:

// A function that MIGHT be async, MIGHT throw sync function loadUser(id) { if (!id) throw new Error("No ID"); // sync throw return fetch(/api/users/${id}); // async }

// ❌ BEFORE — two separate error paths let p; try { p = loadUser(id); // catch sync throw here… } catch (e) { handleError(e); } p?.catch(e => handleError(e)); // …and async reject here

// ✅ ES2025 — one liner, one .catch() Promise.try(() => loadUser(id)) .then(user => render(user)) .catch(err => showError(err)); // catches BOTHCode language: JavaScript (javascript)

I will, once again, refer you to a Claude Code-produced demo which does a surprisingly good job of demonstrating the concept.

Import Attributes

Import attributes are a big personal favorite. For real! For one, I like the idea of just importing JSON data as JSON data rather than having to fetch it and parse it and all that:

import data from "./file.json" with { type: 'json' }Code language: JavaScript (javascript)

That whole with part with the subsequent object are what are called the “import attributes”, and they have a few more tricks up their sleeve that we’ll get to.

The JSON import just looks nice to me and saves a line of code or two, but to be fair, it has some really notable downsides that Jake Archibald points out in Importing vs fetching JSON. One big one: if the import fails “it takes the whole module graph down with it.” which is, uh, very bad. You can use a dynamic import() instead to catch a failure…

try { const { default: data } = await import(url, { with: { type: 'json' }, }); } catch (error) { // Fallback logic }Code language: JavaScript (javascript)

But it’s not as good as the data you get when you just do a fetch for the JSON, so it’s still kinda meh. Jake rounds it out, noting that the data you import “will live in the module graph for the life of the page”, rather than being garbage-collectible like the data after a fetch would be. Anyway: tread lightly.

JSON isn’t the only thing you can import with import attributes, though. When I said import attributes are a personal favorite feature, I mostly mean I’m excited to import CSS in this way.

import componentStyles from "./component.css" with { type: "css" };Code language: JavaScript (javascript)

I get into this in A Nice Vanilla App Architecture Using Web Components and CSS Module Scripts. I just really like how we can keep CSS to CSS files which could live in a folder right next to a JavaScript component.

import sheet from './styles.css' with { type: 'css' };

class MyComponent extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.adoptedStyleSheets = [sheet]; }

... Code language: JavaScript (javascript)

This isn’t absolutely everything in ES2025, and there are plenty of other articles out there specifically getting into that. I found Matthew Tyson’s ECMAScript 2025: The best new features in JavaScript for InfoWorld pretty helpful. It’s got some info in there on Float16Array, for example, that’s a little outside my wheelhouse but has to do with trading precision for memory usage when you know that’s useful.

ECMAScript 2026 (Expected Mid-2026)

It’s still early in 2026, but we’ll expect the annual ECMAScript release mid-year, as in years prior. Here’s stuff that’s already in Stage 4 and will likely make the drop.

Temporal API

Easily the most exciting and useful thing to come into JavaScript in a while. Summed up basically with “Dates and times in JavaScript are good now, no libraries required.” For a long time, big-but-good libraries like Moment filled the gap, making developers choose between performance and DX 😬.

As I write, Safari is the last one without support, but it’s been worked on, and is now in TP (what they call “Technical Preview”), so it’s not far out.

One thing that is now trivial to do is get the time in a particular time zone. No libraries required.

const now = Temporal.Now.zonedDateTimeISO("America/New_York"); // Programatic date console.log(now.toString());

// Or more readable... console.log(now.toLocaleString());Code language: JavaScript (javascript)

I got a kick out of how TC39 meetings have a bit of code to run in your DevTools console to show you when an upcoming meeting is in your current timezone:

Temporal.ZonedDateTime.from('2026-03-10T10:00[America/New_York]') .withTimeZone(Temporal.Now.timeZoneId()) // your time zone .toLocaleString();Code language: JavaScript (javascript)

That’s just cool.

There are a million things Temporal can do, but here are a couple more that really sucked before.

Like how if we “added one month” to the last day in January, we’d get a really whack result:

const date = new Date(2026, 0, 31); // Jan 31 date.setMonth(date.getMonth() + 1); // "add one month" console.log(date.toDateString()); // Sun Mar 03 2026 ❌ 😬Code language: JavaScript (javascript)

But with the lovely Temporal API, we’re square:

const jan31 = Temporal.PlainDate.from("2026-01-31"); const feb = jan31.add({ months: 1 }); console.log(feb.toString()); // 2026-02-28 ✅Code language: JavaScript (javascript)

Also, comparing things is… correct now.

const a = Temporal.Duration.from({ hours: 25 }); const b = Temporal.Duration.from({ days: 1 });

const cmp = Temporal.Duration.compare(a, b, { relativeTo: Temporal.Now.plainDateISO() }); console.log(cmp); // 1 (25h > 1 day) ✅Code language: JavaScript (javascript)

Explicit Resource Management

There is a new using keyword when doing async functions and await that ensures cleanup. The runtime guarantees Symbol.dispose (or Symbol.asyncDispose) is called when the variable goes out of scope.

class FileHandle { constructor(path) { this.path = path; console.log(Opened ${path}); }

async write(data) { // ... write data }

async Symbol.asyncDispose { await someFlushOperation(); console.log(Flushed and closed ${this.path}); } }

async function saveData() { await using file = new FileHandle("output.txt"); await file.write("hello world"); // file is automatically flushed + closed here, even if an error is thrown } Code language: JavaScript (javascript)

The using keyword is nice there for a single resource, but there is also now a DisposableStack for multiple resources you need to be sure to clean up.

async function runJob() { await using stack = new AsyncDisposableStack();

const db = stack.use(await openDatabase()); const file = stack.use(new FileHandle("output.txt")); const tmpDir = stack.defer(async () => removeTempDir("/tmp/job"));

// Do work... await file.write(await db.query("SELECT * FROM jobs"));

// All three are cleaned up here, in reverse order, even if something threw } Code language: JavaScript (javascript)

Array.fromAsync / Iterator Sequencing

Array.fromAsync shipped first in 2024, but apparently there was some spec issues with it, so it only made the spec in ES2026 apparently. It awaits each yielded value as it walks the async iterator, collecting results into a pla