JavaScript from ES6 to Today

#javascript #webdev #programming #es6

ES6 is nearly synonymous with "modern javascript" and rightly so. When it dropped in 2015 as the second-ever major language update (first being ES5 in 2009) ES6 added a huge list of features that completely changed JS development. But time didn't stop in 2015 and the good folks over at ECMA International have released a new version every year since - that's right, in 2021 we're actually on ES12!

If you missed the memo on versions 7-11, you're not alone. Thanks to tools like Babel, Webpack and TypeScript that transpile our code to browser-usable versions, we don't really need to pay much attention to the ES versions. But you might be surprised how many language features are newer - or older - than you thought...

ES6 / ECMAScript 2015

Variables

let
const
Block-scoping
Array destructuring let [ a, b ] = sourceArray
Object destructuring let { a, b } = sourceObject

Object Literals

Property shorthand let obj = { a, b }
Computed property keys let obj = { [a]: "a" }
Method definition let obj = { myMethod(a) { return a } }; obj.myMethod("a");
for...of loops

Arrays

Spread operator [a, b, ...anotherArray]
.copyWithin()
.entries()
.fill()
.find()
.findIndex()
.keys()
.values()

Functions

Arrow declaration () => {}
Default params (a, b = true) => {}
Rest params (a, b, ...rest) => {}
Destructuring params ({ a, b }) => {}
Generators

Classes

class
get
set
static
extends
instanceof

Modules

import
export
default

Regular Expressions

/y (sticky)
/u (unicode)
.flags
.source

Strings

Template literals
.includes()
.startsWith()
.endsWith()
.repeat()

New Global Objects / Methods

Map
Set
WeakMap
Promise
Symbol
RegExp
Object
- .assign()
- .entries()
Array
- .from()
- .of()
Number
- .EPSILON
- .MIN_SAFE_INTEGER
- .MAX_SAFE_INTEGER
- .isInteger()
- .isSafeInteger()
- .isFinite()
- .parseFloat()
- .parseInt()
- .isNaN()
Math
- .cbrt()
- .log10()
- .log2()
- .sign()
- .trunc()
- .hypot()

That's everything released in ES6. It's a lot. But if you feel like something's missing from the list, keep going. There's 6 more years of features to go!

Fun fact: ES6 is now fully supported by browsers, so it no longer needs to be transpiled unless you're unfortunate enough to be supporting Internet Explorer (my condolences)

ES7 / ECMAScript 2016

Exponentiation 3 ** 4
Array.includes()

ES8 / ECMAScript 2017

Asyncronous functions async/await
Object destructuring rest assignment let { a, b, ...c } = sourceObject
Object spread properties { a: 'a', b: 'b', ...anotherObject }
Object
- .entries()
- .getOwnPropertyDescriptors()
- .values()
String prototypes
- .padStart()
- .padEnd()
Trailing commas in function parameters
Shared memory and atomics

ES9 / ECMAScript 2018

Async iteration for-await-of
Rest and Spread for Object Literals
Promise.prototype.finally()
Tagged Template Literals
Regular Expressions
- named capture groups
- better escapes
- lookbehind assertions

ES10 / ECMAScript 2019

Optional catch binding
Symbol.prototype.description
Object.fromEntries()
String methods .trimStart() and .trimEnd()
Array methods .flatMap() and .flat()

ES11 / ECMAScript 2020

Bigint data type
Optional chaining on objects myObject?.details?.name
Nullish coalescing operator a ?? b
String.prototype.matchAll()
Dynamic imports via import()
Promise.allSettled()
globalThis
import.meta
Namespace re-exporting: export \* as ns from "mod"

ES12 / ECMAScript 2021

String.prototype.replaceAll()
Promise.any()
WeakRefs
Logical assignment operators
Underscores as separators in number and bigint

What's next for JS?

JavaScript's yearly release pace doesn't look to be slowing down anytime soon. ES13 is already in the works, slated for release in 2022 with a still-growing list of new additions like .at() for arrays, Object.hasOwn(). If you want to stay ahead of the curve, you can follow the progress of proposals for language additions here on GitHub. There are some that will come out next year, but many more to keep an eye on for later versions (personally, I'm hoping for the pipe operator soon).

But until then, sound off in the comments with the JS features you were surprised are older or newer than you though or that you'd never even heard of before! Unless you work with ECMA International, I'm willing to bet there's a few 😄.