Future JavaScript

Future JavaScript

Some JavaScript features that you may (or may not) see in the future. Taken from the TC39 and newer V8.

Top-level await

// index.js

await myFunction() // no need to run it with async on top level.

Object.hasOwn()

const myObject = {
  name: 'dav1',
  age: 28
}

Object.hasOwn(myObject, 'name') // true

Error cause

const parentError = new Error('Parent error')

const childError = new Error('Child error', { cause: parentError })

Array.at()

[1,2,3,4,5,6].at(-2) // 5

Set

const arrayWithDuplicates = [1,2,3,4,4,4,5,6,7]
const mySet = New Set(arrayWithDuplicates) // [1,2,3,4,5,6,7]
const arrayWithoutDuplicates = [...mySet]

Temporal

const myDate = Temporal.now.plainDateISO()
console.log(myDate) // 2021-09-03
console.log(myDate.add({ days: 2 })) //2021-09-05

Array.findLast() and Array.findLastIndex()

const userData = [{
    name: 'John', 
    age: 23
  },{
    name: 'Maria',
    age: 34
  },{
    name: 'John',
    age: 33
  }
]

userData.findLast(user => user.name === 'John') // { name: 'John', age: 33 }
userData.findLastIndex(user => user.name === 'John') // 2

Throw Expressions

function addDays( date = throw new TypeError("Argument required")) {
   //...
}

Import()

const modules = await import("module-name");

Pipeline

const a = 4
a |> multiplyBy2(^) |> addFour(^) |> addOne(^) // 13

Logical Nullish Assignment

let a = 10
a ??= 14
console.log(a) // 10
let b = undefined
b ??= 14
console.log(b) // 14

Numeric separators

const a = 1_000_000 // make it easy to read and understand

String.replaceAll()

let a = 'money money money car money'.replaceAll('money', 'bees')
// bees bees bees car bees

Records and Tuples

const a = #{
  b: 'This cannot be changed!'
}

const b = #[1,2,3,'This cannot be changed either']

Optional catch binding

try {
  doSomething();
} catch { //No need to bind the errror!
  handleException(); 
}

Module Blocks

// this can be useful when dealing with workers.
const moduleBlock = module {
    export async function main(url) {
        return import.meta.url;
    }
}