JavaScript: Latest Stage-4 features
Tags: javascript
Published: 2020-07-22 21:43:03

The below features advanced to stage-4 in the recent TC39 meeting:

- Intl.DateTimeFormat: dateStyle & timeStyle
- Intl.ListFormat.
- Logical Assignment.
- Numeric Separators.
- Promise.any & AggregateError.
- WeakRefs & FinalizationRegistry.

Let us see quick code example for the same:


#### Intl.DateTimeFormat
> This [proposal](https://tc39.es/proposal-intl-datetime-style/) adds two options to Intl.DateTimeFormat: dateStyle and timeStyle

```js
let date = new Intl.DateTimeFormat("en" , {
  timeStyle: "medium",
  dateStyle: "short"
});

date.format(Date.now()); // "01.02.2020, 13:30"

// styles: undefined, "full", "long", "medium", or "short"
```

#### Intl.ListFormat
>  This [proposal](https://github.com/tc39/proposal-intl-list-format) enable language-sensitive list formatting

```js
const lf = new Intl.ListFormat("en", {
    localeMatcher: "best fit", // can be "lookup"
    type: "conjunction", // "conjunction", "disjunction" or "unit"
    style: "long", // other values: "short" or "narrow"
});

lf.format(['Apple', 'Orange' , 'Plum']);
// > "Apple, Orange, and Plum"

/*
  localeMatcher -> "best fit" or "lookup"
  type -> "conjunction", "disjunction" or "unit"
  style -> "long", "short" or "narrow"
*/
```

#### Logical Assignment
> This [proposal](https://tc39.es/proposal-logical-assignment/) allows to combine Logical Operators and Assignment Expressions.

```js
// "Or Or Equals" (or, the Mallet operator :wink:)
a ||= b;
a || (a = b);

// "And And Equals"
a &&= b;
a && (a = b);

// "QQ Equals"
a ??= b;
a ?? (a = b);
```

#### Numeric Separators.
>  This [proposal](https://tc39.github.io/proposal-numeric-separator/) is a merge between `proposal-numeric-underscores`, to extend the existing `NumericLiteral` to allow a separator character between digits.

```js
1_000_000_000           // Billion
101_475_938.38          // Hundreds of millions

let fee = 123_00;       // $123 

let hex = 0xA0_B0_C0;

let octal = 0o1234_5670;

```

#### Promise.any & AggregateError.
> This [proposal](https://tc39.es/proposal-promise-any/) of `Promise.any` accepts an iterable of promises and returns a promise that is fulfilled by the first given promise to be fulfilled, or rejected with an `AggregateError`

```js
try {
  const first = await Promise.any(promises);
  // Any of the promises was fulfilled.
} catch (error) {
  // All of the promises were rejected.
}
```

```js
const aggregateError = new AggregateError([errA, errB, errC], 'Oops!');
```

#### WeakRefs & FinalizationRegistry.
> This [proposal](https://tc39.es/proposal-weakrefs/) allows creating weak references to objects with the `WeakRef` and running `user-defined` finalizers after objects are garbage-collected, with the `FinalizationRegistry` class

```js
const makeWeakCached = f => {
  const cache = new Map();
  const cleanup = new FinalizationRegistry(key => {
    const ref = cache.get(key);
    if (ref && !ref.deref()) cache.delete(key);
  });

  return key => {
    const ref = cache.get(key);
    if (ref) {
      const cached = ref.deref();
      // See note below on concurrency considerations.
      if (cached !== undefined) return cached;
    }

    const fresh = f(key);
    cache.set(key, new WeakRef(fresh));
    cleanup.register(fresh, key);
    return fresh;
  };
}

const getImageCached = makeWeakCached(getImage);
```

Hope you liked the proposals, feel free to comment with your thoughts! 🤓

--
[@gnumanth](https://twitter.com/gnumanth)