JavaScript news in 2022

Every month we get tons of updates in our favorite languages, and JavaScript is no exception.

I made a video explaining a bit more about how JavaScript’s release process works for new features. If you haven’t watched it yet, I strongly recommend it so you can better understand how everything works.

With that said, the 2022 version of ECMAScript—the spec behind JS—is incredible, and I’ll explore all the major features with you!

The `.at()` method for all indexables#

One of the simplest but also coolest additions is the new .at() method on arrays and any other native indexable, like strings.

What it does is give you the item at the requested position in an array. For example:

1
const cart = ['banana', 'apple', 'pear']
2
cart.at(0) // banana
3
cart.at(-1) // pear
4

5
// Out of bounds
6
cart.at(100) // undefined

And it works for any indexable, so if we have a string:

1
const phrase = 'The quick brown fox jumps over the lazy dog'
2

3
phrase.at(0) // T
4
phrase.at(-1) // g

Capture indices in RegExp#

Now, besides returning the match from your regex, the RegExp constructor also returns a list of indices showing where that match started and ended. For example:

1
const input = 'abcd'
2
const match = /b(c)/.exec(input)
3
const indices = match.indices
4

5
indices.length // 2
6
matches.length // 2
7
// The number of indices equals the number of matches
8

9
indices[0] // [1,3] start/end of the first match "b"
10
input.slice(indices[0][0], indices[0][1
11
]) // same as match[0]

Object.hasOwn#

A simpler variation of Object.hasOwnProperty that returns true for all properties that belong directly to an object (not inherited):

1
const books = {}
2
books.pages = 123
3

4
Object.hasOwn(books, 'pages') // true
5
Object.hasOwn(books, 'toString') // false
6

7
// The 'in' operator checks all properties
8
'pages' in books // true
9
'toString' in books // true

Error causes with `Error.cause`#

This is one of the major changes and one I think will be most useful. This new property on the error class shows you what caused the error.

1
const error = new Error('An error', { cause: 'The cause of this error' })
2

3
error instanceof Error // true
4
error.cause // 'The cause of this error'

The main use case is avoiding passing the error object directly:

1
try {
2
  doesNotWork();
3
} catch (err) {
4
  throw new Error('doesNotWork failed!', { cause: err });
5
}

Top-level await#

This has been available in Node.js for a while, but since we have ESModules we can now do top-level await, that is, an await outside of an async function:

1
// fails in the old implementation
2
await Promise.resolve('🍎');
3
// → SyntaxError: await is only valid in async function
4

5
// the workaround we usually do with IIFE
6
(async function() {
7
  await Promise.resolve('🍎');
8
  // → 🎉
9
}());
10

11
// new top-level await implementation
12
await Promise.resolve('🍎') // '🍎'

Class field declarations#

We FINALLY now have class property declarations outside the constructor. That means we can declare and assign a value to a class property without needing a constructor with this.prop = prop.

This was already pretty common in TypeScript, but now it’s coming natively to JavaScript:

1
class MyClass {
2
    /*
3
      instead of:
4
      constructor() { this.publicID = 42; }
5
    */
6
    publicID = 42; // public field
7

8
    /*
9
      instead of:
10
      static get staticPublicField() { return -1 }
11
    */
12
    static staticField = -1;
13

14
    // private static fields
15
    static #privateStaticField = 'private';
16

17
    // private methods
18
    #privateMethod() {}
19

20
    // static initialization with static declaration blocks
21
    static {
22
      // Runs when the class is created
23
    }
24
}

Class field checks through reflection#

This is a tricky use case, but when we tried checking a class property through a static initialization block, we’d get an error saying the class wasn’t initialized or the property doesn’t exist. This got fixed:

1
class C {
2
  #prop;
3

4
  #method() {}
5

6
  get #getter() {}
7

8
  static isC(obj) {
9
    // using 'in'
10
    return #prop in obj && #method in obj && #getter in obj;
11
  }
12
}