What is it?
ES6 (2015) and every yearly update since are the modern JavaScript every
2026 codebase uses. Arrow functions, const/let, template literals,
destructuring, spread/rest, optional chaining, nullish coalescing —
these are the syntax of working code, not "nice to know" extras.
Why it matters
Modern code reads differently from ES5. If your reflexes are still
var that = this and arguments[0], you'll feel slower in any
codebase. Worse, you'll write code that pattern-matches to "junior" in
review without anyone naming why.
What to learn
constvslet(and why you almost never usevar)- Arrow functions and their lexical
this - Template literals and tagged templates
- Destructuring: object, array, defaults, rename, rest
- Spread (
...) for arrays, objects, and function args - Optional chaining (
?.) and nullish coalescing (??) Arraymethods:map,filter,reduce,find,flatMap
Common pitfall
Using arrow functions everywhere, including class methods that need
their own this. Arrows inherit this from the enclosing scope — fine
for callbacks, broken for object methods that expect to receive their
own context. Use the right tool for each job.
Resources
Primary (free):
- MDN — JavaScript reference · docs
- JavaScript.info — Modern JavaScript · docs
- TC39 proposals · docs
Practice
Take an old JS file (or write a deliberately verbose one) and modernize
it. Replace function() {} with arrows where it fits, switch var to
const/let, destructure parameters, replace && chains with ?..
Done when the file is at least 20% shorter and reads cleaner.
Outcomes
- Refactor an ES5 codebase to modern syntax without breaking behavior.
- Pick
constoverletby default, and explain whenletis necessary. - Use destructuring + defaults to clean up function signatures.
- Read modern code (
?.,??, spread) and parse intent at a glance.