#optional chaining

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.

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.

Getting object property paths can be tricky on complex objects, because just one property being empty will trigger an error. For example, when getting page menu data from an API:

function getPageMenu() { return [ { title: 'Dashboard', location: { fullUrl: 'https://my-website.com/dashboard/user1', shortUrl: 'https://goo.gl/929okH' } }, { title: 'Logout', // No location since it redirects to a login page } ] } function printAllPageLinks() { const pageMenuData = getPageMenu(); for (let page of pageMenuData) { // Error here console.log(page.location.fullUrl); } } printAllPageLinks();

There will be an error with the console.log above. Normally, these links would be used in a UI, but this is just for example purposes. To avoid this, the && syntax can be used:

function printAllPageLinks() { const pageMenuData = getPageMenu(); for (let page of pageMenuData) { console.log(page.title, page.location && page.location.fullUrl); } }

This is ok, but it is verbose and will look confusing to anyone not very familiar with Javascript as this syntax does not appear in any other very popular languages (that I am aware of). Instead, a get function can be used from Lodash (there are similar alternatives in many other utility libraries):

function printAllPageLinks() { const pageMenuData = getPageMenu(); for (let page of pageMenuData) { console.log(page.title, _.get(page, 'location.fullUrl')); } }

The processing will be slower due to the interpretation of the string properties, but that is the only drawback. For the most part this level of efficiency will not matter. Since the implentation for the above is complex (e.g. it should support arrays too), I will not be showing a simple example like usual.

Finally, there is a JavaScript feature proposal called Optional Chaining in the works for language syntax support. Just keep in mind it is early in the process being stage 1 and may never actually make it into the language:

function printAllPageLinks() { const pageMenuData = getPageMenu(); for (let page of pageMenuData) { console.log(page.title, page.?location.?fullUrl); } }