Javascript In Near Future (mid 2018)

3 min readMay 15, 2018

When ES6 (ES2015) standard came out, it was overwhelming to check all new cool language features and to start using them asap. Although new features were awesome, ES6 was huge step forward and browsers needed quite some time to implement them.

Now, years later, Javascript is in much better state. Javascript will continue it’s improvement and each browser has it’s on part in this process.

Looking back at 2017, I would say async/await was single most useful feature.

Now, it’s almost mid 2018, and it’s time to see what is coming in near future. So, lets check at kangax table and proposals. There is lot of new and nice features like: static class field, private class fields, object rest/spread, promise finally, pipeline operator, optional chaining operator (?.), nullish coalescing operator (??), do expression …
But only few of those language features actually grab my attention:

For-await-of

This feature got traction and it’s so cool I must mention it. Lets make few async calls and iterate over responses in order:

async function fetchSomeUsers() {
  let requests = [
    fetch('https://reqres.in/api/users/1'),
    fetch('https://reqres.in/api/users/2'),
    fetch('https://reqres.in/api/users/3')
  ]
  
  for await (let response of requests) {
    let user = await response.json()
    console.log(user)
  }
}fetchSomeUsers()

Numeric Separators

Can you spot what this number is? 1000000000
How about this? 1_000_000_000 😎

0b1001_0101_0000_1111  // binary literal
0xFFA9_01FE            // hex literal

This will improve reading of number literals a lot.
Many will say that other languages already have them, but JS is catching up, little by little.

Big Integers

Arbitrary precision integers ftw. JS is usually not best language to handle numbers, but this look really nice. Right now we have Number.MAX_SAFE_INTEGER which is 2⁵³-1. So if you really need integers with greater values, now you can use big integers.

const max = Number.MAX_SAFE_INTEGER
// 9_007_199_254_740_991 max + 2
// 9_007_199_254_740_992 -> wrong!BigInt(Number.MAX_SAFE_INTEGER) + 2n
// 9_007_199_254_740_993n -> correct!

Right now in Chrome Canary under the enabled experimental flag, we can use bigint with numeric separators ftw. We can also use operators such as +, -, /, *, %, **, comparison and bitwise operators.

Optional Catch Binding

What if we really really really don’t care about exception.

try {
  // try to do something
} catch (o_O) {
  // carry on
}

We can use catch like this:

try {
  // try to do something
} catch {
  // carry on
}

Instance Class Fields

This is pure awesome. Lets write imaginary button component.

class Button extends SomeComponent {
  constructor() {
    super()
    this.count = 0
    this.click = this.click.bind(this)  // really ???
  }  click() {
    this.count++
  }
  
  ...
}

With instance class fields component can look like this:

class Button extends SomeComponent {
  count = 0  click = () => {
    this.count++
  }  ...
}

If we do not specify a constructor method, a default constructor is used 😎

The Future Is Now

If you are reading this in distant future from 2018, you may already using those handy little language features. If not, see you in a bright JS future.