“Modern JavaScript” is not one version. It is the style of code written with the features added since ES2015, and still being added every year. Here is a map of the features worth knowing, grouped by the problem they solve, with links to the lessons.
Declaring and organising code
| Feature | What it replaces | Lesson |
|---|---|---|
const and let | var | let and const |
ES modules (import, export) | script tags, IIFEs, globals | Modules |
Classes with fields, #private, static | constructor functions and conventions | Classes |
Optional catch binding (catch { }) | catch (e) when you do not use e | try…catch |
Writing less code
| Feature | Example |
|---|---|
| Arrow functions | n => n * 2 |
| Template literals | text with ${name} placeholders |
| Default and rest parameters | function f(a = 1, ...rest) |
| Destructuring | const { name, age } = user |
| Spread | [...list, item], { ...defaults, ...options } |
| Property shorthand | { name, age } |
Safer, clearer logic
| Feature | Example |
|---|---|
| Optional chaining | user?.address?.city |
| Nullish coalescing | value ?? "default" |
| Logical assignment | cache ??= {} |
Object.hasOwn() | replaces obj.hasOwnProperty(key) |
at() | list.at(-1) for the last item |
Working with data
| Feature | Example |
|---|---|
map, filter, reduce, find, some, every | Arrays |
Object.entries, Object.fromEntries | Objects |
Map and Set | Collections |
structuredClone() | deep copies |
Non-mutating array methods (toSorted, with…) | Immutable updates |
Asynchronous code
| Feature | Lesson |
|---|---|
| Promises | Promises |
async / await | async and await |
Promise.all, allSettled, any | Promise.all |
fetch() and AbortController | Fetch API |
Dynamic import() | Dynamic import |
Small syntax helpers
script.js
JS
const big = 1_000_000; // numeric separators
console.log(big); // → 1000000
console.log(2 ** 8); // → 256 (exponent operator)
let settings = null;
settings ??= { theme: "dark" }; // logical assignment
console.log(settings.theme); // → dark
console.log([1, 2, 3].at(-1)); // → 3
console.log(Object.hasOwn({ a: 1 }, "a")); // → trueYou do not need to use every feature
Modern does not mean “use the newest thing”. It means picking the clearest tool for the job. If a plain for loop is easier to read than a clever chain, use the loop.
The language keeps changing
New features are added every year (JavaScript Versions). The next lessons cover the smaller helpers, the very recent additions where you should check support, and how to keep up without chasing every proposal.