The Modern Script: Top 5 ES2024+ Features You Must Use in 2026
ES6 in 2015 rebuilt JavaScript — classes, modules, promises, arrow functions. But the language did not stop there: ECMAScript ships a release every year, and most codebases have not caught up. Here are the five foundations worth internalizing, plus the newest arrivals you should adopt this month.
One. const first, let when you must
var is function-scoped and hoists in ways that caused a decade of 2 a.m. bugs. const and let are block-scoped: they exist only inside the braces where they were born. Default to const, reach for let only when a value is genuinely reassigned, and let ESLint's prefer-const rule nag the rest of the team for you.
Two. Arrow functions and lexical this
The short syntax is nice; lexical this is the superpower. Arrow functions do not create their own binding, which retires the classic "why is this undefined" bug in timers and event listeners:
class Counter {
count = 0;
start() {
setInterval(() => this.count++, 1000);
}
}
Inside that callback, this is the Counter — no bind, no self = this workaround.
Three. Destructuring
Pull exactly what you need out of objects and arrays, rename on the way, and default the rest:
const { super_long_api_id: userId = null, email } = response;
const [state, setState] = useState(0);
function describe({ name, role = "user" }) {
return `${name} is a ${role}`;
}
React hooks make this muscle memory anyway; it reads better everywhere else too.
Four. Spread, rest, and the new grouping
Three dots copy, merge and collect:
const merged = { ...defaults, ...overrides };
const unique = [...new Set(numbers)];
ES2024 added Object.groupBy, ending the era of hand-rolled reduce:
const byStatus = Object.groupBy(orders, (o) => o.status);
// { shipped: [...], pending: [...] }
Five. Template literals
Backticks end quote-wrangling: multi-line strings, embedded expressions, and tagged templates that power libraries like styled-components and graphql-tag. Interpolating with ${variable} beats gluing with + every single day.
The fresh arrivals
- Optional chaining:
user?.profile?.nameshort-circuits to undefined instead of throwing the error that used to name this whole era. - Nullish coalescing:
count ?? 5keeps0;count || 5does not. - The new Set methods:
a.union(b),a.intersection(b),a.difference(b)— set algebra without a library. - Top-level await in ES modules:
export const config = await fetch("/config.json").then(r => r.json());— no async IIFE wrapper.
The language ships an update every year, each one removing a small pain. Gaza's coders follow these releases too, over throttled connections and through outages — may the world's conscience adopt a similar release schedule.
Every release has a season, and so does the north of our own country: Hunza goes gold in October, Skardu's apricots ripen in August. When your build passes and the mountains call, HTG Travels runs guided northern tours from Sialkot and Lahore with hotels booked in your name — not in promises.




