#es2020

Private variables have always been possible in JavaScript, but before the new syntax they required somewhat cumbersome steps to use. For example:

function Car(name, hp) { const privateVariable = 'test1'; this.name = name; this.hp = hp; // Note this will not appear in inherited copies of this object. this.print = function() { console.log(`${this.name} (${this.hp}) - secret: ${privateVariable}`); } } const miata = new Car('miata', 155); console.log(miata.name); // miata console.log(miata.hp); // 155 console.log(miata.privateVariable); // undefined miata.print(); // miata (155) - secret: test1

Basically, private variables can be created in a scope that is no longer available and used via a closure. Now with the # syntax, this is much more straightforward:

class Car { #privateVariable = 'test1'; constructor(name, hp) { this.name = name; this.hp = hp; } print() { console.log(`${this.name} (${this.hp}) - secret: ${this.#privateVariable}`); } } const miata = new Car('miata', 155); console.log(miata.name); // miata console.log(miat2.hp); // 155 console.log(miata.privateVariable); // undefined miata.print(); // miata (155) - secret: test1

This is currently supported in Node.js 12 and Chrome by default. It will likely be in other browsers soon since it is now part of the JS standard.

If the below code blocks do not show up properly due to a recent Tumblr change. View them directly at https://obscurejavascript.tumblr.com/

Just like private variables, private methods have always been possibly in JavaScript though there syntax is even more cumbersome:

function Car(name, hp) { function getSecret() { return 'test 1'; } this.name = name; this.hp = hp; // Note this will not appear in inherited copies of this object. this.print = function() { console.log(`${this.name} (${this.hp}) - secret: ${getSecret()}`); } } const miata = new Car('miata', 155); console.log(miata.name); // miata console.log(miata.hp); // 155 console.log(miata.getSecret); // undefined miata.print(); // miata (155) - secret: test1

In other words functions only available in a scope no longer accessible need to be referenced. Unlike with private class fields, there is no direct equivalent to using # in modern browsers like this documentation describes. Though something very similar can be done:

class Car { #getSecret = function() { return 'test 1'; } constructor(name, hp) { this.name = name; this.hp = hp; } print() { console.log(`${this.name} (${this.hp}) - secret: ${this.#getSecret()}`); } } const miata = new Car('miata', 155); console.log(miata2.name); // miata console.log(miata2.hp); // 155 console.log(miata.getSecret); // undefined miata2.print(); // miata (155) - secret: test1

Basically, just use a private class field and assign a function to it directly. That function even has access to the current class this as long as a normal function is used and not an arrow function. Since this uses a private field, this is currently supported in Node.js 12 and Chrome by default. It will likely be in other browsers soon since it is now part of the JS standard.

If the below code blocks do not show up properly due to a recent Tumblr change. View them directly at https://obscurejavascript.tumblr.com/

Just like with optional function calls, it is possible to use a simple syntax for optional chaining. Firstly, without a library or helper method, getting a deep property safely can involve a lot of checks:

function printShortUrls(menu = []) { for (const option of menu) { if (option) { if (option.location && option.location.shortUrl) { console.log(option.title, ':', option.location.shortUrl); } else { console.log(option.title, ': (none)'); } } else { console.log('(empty)'); } } } const menu = [ { title: 'Dashboard', location: { fullUrl: 'https://my-website.com/dashboard/user1', shortUrl: 'https://goo.gl/929okH' } }, null,// Used to mark a menu separator { title: 'Logout', // No location since it redirects to a login page } ]; printShortUrls(menu); // Dashboard : https://goo.gl/929okH // (empty) // Logout : (none)

By using optional chaining, this can be simplified a lot:

function printShortUrls2(menu = []) { for (const option of menu) { if (option) { const shortUrl = option?.location?.shortUrl || '(none)'; console.log(option.title, ':', shortUrl); } else { console.log('(empty)'); } } }

Optional chaining is now supported in all major browsers. Though only very recently, so make sure you are on the latest version if running the code above on one of them. It is already in Node.js 14, but that version will not be ready for production use (for most people) until about October this year.

Previously, to declare class fields you had to put them in some kind of method in the class (usually the constructor). For example:

class Car { constructor() { this.name = 'Not Set'; this.hp = 0; } format() { return `${this.name} - ${this.hp}`; } } const defaultCar = new Car(); console.log(defaultCar.format()); // Not Set - 0 const miata = new Car(); miata.name = 'miata'; miata.hp = 155; console.log(miata.format()); // miata - 155

With public instance fields the constructor can be removed as well as some of the boilerplate code:

class Car { name = 'Not Set'; hp = 0; format() { return `${this.name} - ${this.hp}`; } }

This makes the type of the field clearer as well as ensuring the core API of the class is defined at the top. This also makes it less liekly to forget to initialize defaults for fields.

Public instance fields are supported in Node.js 12 and the latest Chrome and Firefox. Other modern browser support should come this year.

If the below code blocks do not show up properly due to a recent Tumblr change. View them directly at https://obscurejavascript.tumblr.com/

This is useful when using a Publisher/Subscriber pattern or similar. Which is useful for making 2 parts of code communicate when one is loaded before another (e.g. they are both loaded asynchronously). Additionally, those 2 parts of code only need to know about the central element and not each other making it easier to modify one without affecting the other. Firstly, here is a very simple example:

class Mailbox { subscriber = null; register(subscriber) { this.subscriber = subscriber; } publish(message) { if (typeof this.subscriber === 'function') { this.subscriber(message); } } } const mailbox = new Mailbox(); // Keep on publishing messages let number = 1; setInterval(() => { number += 1; mailbox.publish(`Test Message: ${number}`); }, 500) mailbox.register((message) => { console.log('message:', message); }); // message: Test Message: 2 // message: Test Message: 3 // message: Test Message: 4 // and so on...

Notice how the first message was not printed ("Test Message: 1") since the subscriber was not yet available. Which is to simulate when a publisher starts before a subscriber. To handle this a specific function call check needs to be made for subscriber existence. Instead, the original subscriber value could be set to a function. But then it would be hard to determine when a subscriber was set externally to the Mailbox.

Anyways, if optional chaining is supported in your environment, the call can be simplified:

publish(message) { this.subscriber?.(message); }

Optional chaining is currently supported in Chrome, Firefox and a few other environments but not Node.js. Since this is becoming part of the JavaScript standard, it should be in all environments relatively soon.

A short way of setting default values in JavaScript is using the logical or operator ||. Which returns the left value if the left value is truthy. Otherwise the right value is returned. For example:

function message(contents) { console.log('Message:', String(contents || '(No Message)')); } message(); // Message: (No Message) message('Some contents'); // Message: Some contents

This is supported by all JavaScript environments and browsers even very old ones. Unlike more modern syntax like default function parameters. Note that strings can be created with new String(), which is why the main statement is wrapped in String() above:

message(new String('Some contents')); // Message: Some contents

Anyways, this relies on a value being truthy which is a concept with a bunch of strange exceptions that programmers often miss unless being very careful: https://developer.mozilla.org/en-US/docs/Glossary/Falsy. For example, if I were to pass an empty string in the below:

message(''); // Message: (No Message)

Which is wrong, it should print "Message: ". This is because unlike all other strings an empty string is falsy. So instead of using || more explicity emptyiness checks should be done. So making message work in all cases (assuming the value passed in is always a string):

function message(contents) { console.log('Message:', String((contents || contents === '') ? contents : '(No Message)')); } message(); // Message: (No Message) message('Some contents'); // Message: Some contents message(''); // Message: message(new String()); // Message: message(new String('Some contents')); // Message: Some contents

Which is getting pretty complicated for such a simple operation. Since the above is kind of painful to figure out the danger is there is the temptation to only use || since it works in almost every case. Instead the nullish coalescing operator can be used ??:

function message(contents) { console.log('Message:', String(contents ?? '(No Message)')); }

Currently, this is only fully supported in the latest Chrome, Firefox and a few other environments. Though it will be implemented in other JS environments relatively soon since it is becoming part of the JavaScript standard: https://github.com/tc39/proposal-nullish-coalescing. You can read about the tc39 process here: https://2ality.com/2015/11/tc39-process.html