Skip to main content

BigInt: arbitrary-precision integers in JavaScript

· 10 min read
Mathias Bynens ([@mathias](https://twitter.com/mathias))

BigInts are a new numeric primitive in JavaScript that can represent integers with arbitrary precision. With BigInts, you can safely store and operate on large integers even beyond the safe integer limit for Numbers. This article walks through some use cases and explains the new functionality in Chrome 67 by comparing BigInts to Numbers in JavaScript.

Optional `catch` binding

· One min read
Mathias Bynens ([@mathias](https://twitter.com/mathias))

The catch clause of try statements used to require a binding:

try {
doSomethingThatMightThrow();
} catch (exception) {
// ^^^^^^^^^
// We must name the binding, even if we don’t use it!
handleException();
}

In ES2019, catch can now be used without a binding. This is useful if you don’t have a need for the exception object in the code that handles the exception.

try {
doSomethingThatMightThrow();
} catch { // → No binding!
handleException();
}

Optional catch binding support

`String.prototype.trimStart` and `String.prototype.trimEnd`

· One min read
Mathias Bynens ([@mathias](https://twitter.com/mathias))

ES2019 introduces String.prototype.trimStart() and String.prototype.trimEnd():

const string = '  hello world  ';
string.trimStart();
// → 'hello world '
string.trimEnd();
// → ' hello world'
string.trim(); // ES5
// → 'hello world'

This functionality was previously available through the non-standard trimLeft() and trimRight() methods, which remain as aliases of the new methods for backward compatibility.

const string = '  hello world  ';
string.trimStart();
// → 'hello world '
string.trimLeft();
// → 'hello world '
string.trimEnd();
// → ' hello world'
string.trimRight();
// → ' hello world'
string.trim(); // ES5
// → 'hello world'

Dynamic `import()`

· 5 min read
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Dynamic import() introduces a new function-like form of import that unlocks new capabilities compared to static import. This article compares the two and gives an overview of what’s new.

`Promise.prototype.finally`

· 2 min read
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Promise.prototype.finally enables registering a callback to be invoked when a promise is settled (i.e. either fulfilled or rejected).

Imagine you want to fetch some data to show on the page. Oh, and you want to show a loading spinner when the request starts, and hide it when the request completes. When something goes wrong, you show an error message instead.

const fetchAndDisplay = ({ url, element }) => {
showLoadingSpinner();
fetch(url)
.then((response) => response.text())
.then((text) => {
element.textContent = text;
hideLoadingSpinner();
})
.catch((error) => {
element.textContent = error.message;
hideLoadingSpinner();
});
};

`Intl.PluralRules`

· 4 min read
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Iñtërnâtiônàlizætiøn is hard. Handling plurals is one of many problems that might seem simple, until you realize every language has its own pluralization rules.

For English pluralization, there are only two possible outcomes. Let’s use the word “cat” as an example:

  • 1 cat, i.e. the 'one' form, known as the singular in English
  • 2 cats, but also 42 cats, 0.5 cats, etc., i.e. the 'other' form (the only other), known as the plural in English.

The brand new Intl.PluralRules API tells you which form applies in a language of your choice based on a given number.

const pr = new Intl.PluralRules('en-US');
pr.select(0); // 'other' (e.g. '0 cats')
pr.select(0.5); // 'other' (e.g. '0.5 cats')
pr.select(1); // 'one' (e.g. '1 cat')
pr.select(1.5); // 'other' (e.g. '0.5 cats')
pr.select(2); // 'other' (e.g. '0.5 cats')

Object rest and spread properties

· 2 min read
Mathias Bynens ([@mathias](https://twitter.com/mathias))

Before discussing object rest and spread properties, let’s take a trip down memory lane and remind ourselves of a very similar feature.

ES2015 array rest and spread elements

Good ol’ ECMAScript 2015 introduced rest elements for array destructuring assignment and spread elements for array literals.

// Rest elements for array destructuring assignment:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// Spread elements for array literals:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

ES2018: object rest and spread properties 🆕

So what’s new, then? Well, a proposal enables rest and spread properties for object literals, too.

// Rest properties for object destructuring assignment:
const person = {
firstName: 'Sebastian',
lastName: 'Markbåge',
country: 'USA',
state: 'CA',
};
const { firstName, lastName, ...rest } = person;
console.log(firstName); // Sebastian
console.log(lastName); // Markbåge
console.log(rest); // { country: 'USA', state: 'CA' }