ES2020?!

ECMA, TC39, ECMAScript and JavaScript

ECMA and the TC39

ECMA is an international standards body
(much like ISO, IETF, W3C or WHATWG, for instance)

ES = ECMAScript. The official standard for JavaScript*

TC39 = Technical Committee 39. Caretaker for many standards:
ECMAScript (ECMA-262), Intl (ECMA-402), JSON (ECMA-404), etc.

The TC39 process

Meetings at various locations every 2 months. A yearly release, usually in June.

“ES6” ➡️ ES2015, “ES7” ➡️ ES2016,
and now we say ES2017, etc.

It’s all public.

The TC39 process

Language proposals go through 5 stages:

ES2017

(in case you missed it…)

Moar trailing commas!

spec

function yowza(
  key,
  increment,
) {
  // …
}
                

const yowza = (
  key,
  increment,
) => …
                

yowza(
  'itemScore',
  +10,
)
                

Remember: ES5 (2009…) already let you do these:

const roiDeLaClasse = {
  first: 'Georges',
  last: 'Abitbol',
}
                

const courses = [
  'ES Total',
  'Webpack',
]
                

async / await

Async functions

async function createEntry(req, res) {
  try {
    const urlReq = await fetch(req.body.url)
    const html = await urlReq.text()
    const analysis = unfluff(html)
    const entry = await Entry.post({ … })
    // …
  } catch (err) {
    req.flash('error', `Une erreur est survenue en traitant cette URL : ${err.message}`)
    res.redirect('/entries/new')
  }
}
            

const [tags, entryCount, entries] = await Promise.all([
  Entry.tags(), Entry.count(), Entry.getEntries(req.query),
])
            

ES0218

(As per feature freezing in January 2018, may still expand)

Async iteration

Spec

Easily queue / loop over async requests.
Async iterables, iterators and generators use promises, so async/await work seamlessly with it.

for await (const line of readLines(filePath)) {
  console.log(line)
}
                

async function* readLines(path) {
  let file = await fileOpen(path);

  try {
    while (!file.EOF) {
      yield await file.readLine();
    }
  } finally {
    await file.close();
  }
}
                

Rest / Spread Properties

Spec

// nonStandardAction = { type: 'progress', goalId: 1, increment: 2 }

const { type, ...payload } = nonStandardAction
// => payload = { goalId: 1, increment: 2 }
            

function doStuff(url, options = {}) {
  const opts = { ...DEFAULT_OPTIONS, ...options, regular: true }
  // …
}
            

return {
  ...state,
  history: tallyHistory(state),
  today: moment().format('YYYY-MM-DD'),
  todaysProgress: {},
}
            

Rest / Spread Properties

Spec

This is a new default behavior: you could already implement custom iterability for your objects.

class SuperDuper {
  [Symbol.iterator]() {
    // Prep and return an Iterator-compliant object:
    return {
      next() {
        // …
        return { done, value }
      }
    }
  }
}
            

RegExp extravaganza!

RegExp named capture groups, RegExp Unicode property escapes,
RegExp lookbehind assertions, RegExp DotAll flag

XRegExp, your days are numbered… 😉

const RE_ISO_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u
console.log(RE_ISO_DATE.exec('2017-10-05').groups)
// => { year: '2017', month: '10', day: '05' }

'2017-10-05'.replace(RE_ISO_DATE, '$<day>/$<month>/$<year>')
// => '05/10/2017'

const RE_DIGITS = /^\p{Decimal_Number}+$/u
RE_DIGITS.test('𝟏𝟐𝟑𝟜𝟝𝟞𝟩𝟪𝟫𝟬𝟭𝟮𝟯𝟺𝟻𝟼') // => true

const RE_ANYTHING_GOES = /foo.bar/s
RE_ANYTHING_GOES.test('foo\nbar') // => true
            

Other ES2018 tidbits

Promise#finally, Template literals revision

Always-invoked callback, much like try…finally… :

fetch('/api/v1/ohai')
  .then(…)
  .catch(…)
  .finally(…)
            

Illegal escape sequences in tagged template strings (TTS) don’t break, they only pass the raw string, so you can do this:

latex`\unicode`             // Despite \un not being a valid Unicode escape
windowsPath`C:\uuu\xxx\088` // Despite \uu, \xx and \08 not being valid escapes
            

ES0219 & ES2020

chosen bits that’ll probably show up (stages 2–3)

Class Fields

Spec

class APIConnector extends Component {
  // Public static field
  static propTypes = {
    apiKey: PropTypes.string.isRequired,
  }

  // Private (“for real”, a la C++ friend) instance field
  #secretToken = null

  // Public instance field (equiv. to this.awesome init inside constructor)
  awesome = true

  // …
}
            

Private methods and accessors

Spec

Just a follow-up on private fields…

class APIConnector {
  get #apiToken() {
    …
  }

  set #apiToken(value) {
    …
  }

  #checkConnectivity() {
    …
  }
}
            

import(…)

Dynamic import

Lazily import native ESM (dynamic specifier / code splitting).

import(`./l10n/${currentUser.locale}`)
  .then((locale) => app.l10n.use(locale))
  .catch((err) => app.reportError(err))
            

As this is Promise-based, you can get even fancier:

try {
  app.l10n.use(await import(`./l10n/${currentUser.locale}`))
} catch (err) {
  app.reportError(err)
}
            

Optional catch binding

spec

Not using the exception? No need to bind it now!

try {
  return JSON.parse(await readFile(optionalConfigFilePath))
} catch {
  return {}
}
            

throw expressions

Spec

Not a statement anymore, but an expression. Spares us superfluous function wrapping.

function save(fileName = throw new TypeError('File name required')) {
  …
}

            

function getEncoder(encoding) {
  // Trigger warning: nested ternaries 😱
  const encoder = encoding === 'utf8' ? new UTF8Encoder()
                : encoding === 'utf16le' ? new UTF16Encoder(false)
                : encoding === 'utf16be' ? new UTF16Encoder(true)
                : throw new Error(`Unsupported encoding: ${encoding}`)
  …
}
            

Decorators

Spec

@mixin(SocialNetworkAddictMixin)
class Person {
  @deprecate
  facepalm() { … }

  @throttle('1hr', { leading: true })
  checkFacebook() { … }

  @memoize('15min')
  checkTwitter() { … }
}
                

class Person {
  @computedFrom('firstName', 'lastName')
  get fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}
                

@connect(mapStateToProps, { logOut })
class SettingsScreen extends Component {
  @autobind
  openGoalAdder() { … }

  @override
  componentWillReceiveProps() { … }
}
                

Numeric separator

Spec

Because most major languages have them! 😠

const FACTOR = 1_000_000_000
const FEE = 123_00

const FRACTION = 0.000_001

const BITS = 0b1010_0001_1000_0101
const FLAG = 0xDEAD_BEEF
            

Later

(maybe; stage 1)

Taking it easy with null and undefined

Optional Chaining and Nullish Coalescing

// Deep chaining despite missing slots? Hold my 🍺.
const userStreet = user?.address?.street

// Works for indirect indexing too
const userProp = user?.[propName]

// Optional method? There you go.
iterator.return?.()

// Default value IIF null/undefined?  Sure thing.
const chunkMode = settings.optimization?.splitChunks?.chunks ?? 'async'
            

Véritables protocoles

First-class protocols

protocol RubyStyleEnumerable {
  // Symbol(s) to implement per-case
  _each

  // (Implemented) methods on top of these
  cycle (…) { … }
  count () { … }
  drop (…) { … }
  each (…) { … }
  map (…) { … }
  …
}
                

class Hash implements RubyStyleEnumerable {
  // Implement the symbol your way…
  [RubyStyleEnumerable._each] () { … }

  // …get the rest for free 😉
}
                

Another proposal, maximally-minimal mixins, covers some of the same needs. Unified proposal should emerge for stage 2.

do expressions

Spec

const x = do {
  const tmp = f()
  tmp * tmp + 1
}
                

const x = do {
  if (foo()) { f() }
  else if (bar()) { g() }
  else { h() }
}
                

return (
  <nav>
    <Home />
    {
      do {
        if (loggedIn) {
          <LogoutButton />
        } else {
          <LoginButton />
        }
      }
    }
  </nav>
)
                

Pipeline operator

(FP FTW #1) Spec

Super-readable function composition. Inspired by similar features in OCaml, Elixir, Elm, F#…

Syntax is extremely in flux (4 competing proposals).
Here’s an example:

// Old-school
const result = exclaim(capitalize(doubleSay('hello')))

// Hip
const result = 'hello'
  |> doubleSay
  |> capitalize
  |> exclaim
            

Partial application

(FP FTW #2) Spec

Avoids hacky bind(…) usage. Can be done ad hoc, etc:

const mul = (x, y) => x * y
const mul3 = mul(?, 3)

const fx = (prefix, seed, ...items)
const oneSeededFx = fx(?, 1, ...)
            

Actually super advanced, lazy evals its binding context and arguments. Also combines deliciously with pipelines:

const newScore = player.score
  |> add(7, ?)
  |> clamp(0, 100, ?)
            

Function binding

(FP FTW #3) Spec • Warning: STAGE ZERO!

Use context-based free functions with ad-hoc binding. Sort of an alternative to mixins.

import { map, takeWhile, forEach } from 'iterlib'

getPlayers()
  ::map(x => x.character())
  ::takeWhile(x => x.strength > 100)
  ::forEach(x => console.log(x))
              

Pattern matching

(FP FTW #4) Spec • Warning: STAGE ZERO!

Heavily inspired by Rust, F# and Haskell. Code branching based on structural argument matching.
Early syntax looks like this:

const getLength = (vector) => match (vector) {
  { x, y, z }: Math.sqrt(x ** 2 + y ** 2 + z ** 2),
  { x, y }:    Math.sqrt(x ** 2 + y ** 2),
  [...]:       vector.length,
  else: {
      throw new Error("Unknown vector type");
  }
}