Nuxtstop

For all things nuxt.js

JavaScript from ES6 to Today

#javascript #webdev #programming #es6
JavaScript from ES6 to Today
155 2

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 😄.

Add comment