For some years now it is simply

a?.b?.c
a?.b?.c ?? "default"

Check "Can I Use" for compatibility: https://caniuse.com/mdn-javascript_operators_optional_chaining,mdn-javascript_operators_nullish_coalescing


Update (2022-01-13): Seems people are still finding this, here's the current story:

  • Optional Chaining is in the specification now (ES2020) and supported by all modern browsers, more in the archived proposal: https://github.com/tc39/proposal-optional-chaining
  • babel-preset-env: If you need to support older environments that don't have it, this is probably what you want https://babeljs.io/docs/en/babel-preset-env
  • Babel v7 Plugin: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

Update (2017-08-01): If you want to use an official plugin, you can try the alpha build of Babel 7 with the new transform. Your mileage may vary

https://www.npmjs.com/package/babel-plugin-transform-optional-chaining

Original:

A feature that accomplishes that is currently in stage 1: Optional Chaining.

https://github.com/tc39/proposal-optional-chaining

If you want to use it today, there is a Babel plugin that accomplishes that.

https://github.com/davidyaha/ecmascript-optionals-proposal

Answer from basicdays on Stack Overflow
๐ŸŒ
MDN Web Docs
developer.mozilla.org โ€บ en-US โ€บ docs โ€บ Web โ€บ JavaScript โ€บ Reference โ€บ Operators โ€บ Optional_chaining
Optional chaining (?.) - JavaScript | MDN
The optional chaining (?.) operator accesses an object's property or calls a function. If the object accessed or function called using this operator is undefined or null, the expression short circuits and evaluates to undefined instead of throwing an error.
Top answer
1 of 10
143

For some years now it is simply

a?.b?.c
a?.b?.c ?? "default"

Check "Can I Use" for compatibility: https://caniuse.com/mdn-javascript_operators_optional_chaining,mdn-javascript_operators_nullish_coalescing


Update (2022-01-13): Seems people are still finding this, here's the current story:

  • Optional Chaining is in the specification now (ES2020) and supported by all modern browsers, more in the archived proposal: https://github.com/tc39/proposal-optional-chaining
  • babel-preset-env: If you need to support older environments that don't have it, this is probably what you want https://babeljs.io/docs/en/babel-preset-env
  • Babel v7 Plugin: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

Update (2017-08-01): If you want to use an official plugin, you can try the alpha build of Babel 7 with the new transform. Your mileage may vary

https://www.npmjs.com/package/babel-plugin-transform-optional-chaining

Original:

A feature that accomplishes that is currently in stage 1: Optional Chaining.

https://github.com/tc39/proposal-optional-chaining

If you want to use it today, there is a Babel plugin that accomplishes that.

https://github.com/davidyaha/ecmascript-optionals-proposal

2 of 10
95

It's not as nice as the ?. operator, but to achieve a similar result you could do:

user && user.address && user.address.postcode

Since null and undefined are both falsy values (see this reference), the property after the && operator is only accessed if the precedent it not null or undefined.

Alternatively, you could write a function like this:

function _try(func, fallbackValue) {
    try {
        var value = func();
        return (value === null || value === undefined) ? fallbackValue : value;
    } catch (e) {
        return fallbackValue;
    }
}

Usage:

_try(() => user.address.postcode) // return postcode or undefined 

Or, with a fallback value:

_try(() => user.address.postcode, "none") // return postcode or a custom string
๐ŸŒ
MDN Web Docs
developer.mozilla.org โ€บ en-US โ€บ docs โ€บ Web โ€บ JavaScript โ€บ Reference โ€บ Operators โ€บ Nullish_coalescing
Nullish coalescing operator (??) - JavaScript | MDN
The nullish coalescing operator treats undefined and null as specific values. So does the optional chaining operator (?.), which is useful to access a property of an object which may be null or undefined. Combining them, you can safely access a property of an object which may be nullish and ...
๐ŸŒ
JavaScript.info
javascript.info โ€บ tutorial โ€บ the javascript language โ€บ objects: the basics
Optional chaining '?.'
We can use ?. for safe reading and deleting, but not writing ยท The optional chaining ?. has no use on the left side of an assignment. ... let user = null; user?.name = "John"; // Error, doesn't work // because it evaluates to: undefined = "John"
Top answer
1 of 16
176

You can use the logical 'OR' operator in place of the Elvis operator:

For example displayname = user.name || "Anonymous" .

But Javascript currently doesn't have the other functionality. I'd recommend looking at CoffeeScript if you want an alternative syntax. It has some shorthand that is similar to what you are looking for.

For example The Existential Operator

zip = lottery.drawWinner?().address?.zipcode

Function shortcuts

()->  // equivalent to function(){}

Sexy function calling

func 'arg1','arg2' // equivalent to func('arg1','arg2')

There is also multiline comments and classes. Obviously you have to compile this to javascript or insert into the page as <script type='text/coffeescript>' but it adds a lot of functionality :) . Using <script type='text/coffeescript'> is really only intended for development and not production.

2 of 16
155

2020 Update

JavaScript now has equivalents for both the Elvis Operator and the Safe Navigation Operator.


Safe Property Access

The optional chaining operator (?.) is currently a stage 4 ECMAScript proposal. You can use it today with Babel.

// `undefined` if either `a` or `b` are `null`/`undefined`. `a.b.c` otherwise.
const myVariable = a?.b?.c;

The logical AND operator (&&) is the "old", more-verbose way to handle this scenario.

const myVariable = a && a.b && a.b.c;

Providing a Default

The nullish coalescing operator (??) is currently a stage 4 ECMAScript proposal. You can use it today with Babel. It allows you to set a default value if the left-hand side of the operator is a nullary value (null/undefined).

const myVariable = a?.b?.c ?? 'Some other value';

// Evaluates to 'Some other value'
const myVariable2 = null ?? 'Some other value';

// Evaluates to ''
const myVariable3 = '' ?? 'Some other value';

The logical OR operator (||) is an alternative solution with slightly different behavior. It allows you to set a default value if the left-hand side of the operator is falsy. Note that the result of myVariable3 below differs from myVariable3 above.

const myVariable = a?.b?.c || 'Some other value';

// Evaluates to 'Some other value'
const myVariable2 = null || 'Some other value';

// Evaluates to 'Some other value'
const myVariable3 = '' || 'Some other value';
๐ŸŒ
Onux
docs.onux.com โ€บ en-US โ€บ Developers โ€บ JavaScript-PP โ€บ Language โ€บ Reference โ€บ Expressions โ€บ safe-navigation-operator
Safe Navigation (?.) Operator | JS++ & JavaScript Documentation
The safe navigation operator applies to both existent types and ... If the object (left-hand side) of the expression evaluates to null, the null value will be returned.
๐ŸŒ
Medium
medium.com โ€บ @gabrielairiart.gi โ€บ advanced-javascript-use-of-nullish-coalescing-and-optional-chaining-and-for-efficient-coding-7d1d3fe3eedf
Advanced JavaScript: Use of Nullish Coalescing ?? and Optional Chaining and ?. for Efficient Coding | by Gabriela Iriart | Medium
March 22, 2024 - One powerful tool in JavaScript for managing null values is the Nullish Coalescing Operator (??). This operator allows developers to provide a default value for a variable if it is null or undefined, thus ensuring that the variable has a usable ...
๐ŸŒ
GeeksforGeeks
geeksforgeeks.org โ€บ javascript โ€บ javascript-optional-chaining
JavaScript Optional Chaining - GeeksforGeeks
JavaScript Optional Chaining (ES2020) simplifies safe access to deeply nested object properties by preventing errors when values are null or undefined.
Published ย  June 22, 2020
Find elsewhere
๐ŸŒ
W3Schools
w3schools.com โ€บ jsref โ€บ jsref_oper_nullish.asp
JavaScript Nullish Coalescing Operator
assign() constructor create() defineProperties() defineProperty() delete entries() freeze() fromEntries() getOwnPropertyDescriptor() getOwnPropertyDescriptors() getOwnPropertyNames() groupBy() isExtensible() isFrozen() isSealed() keys() preventExtensions() prototype seal() toString() valueOf() values() JS Operators JS Assignment ยท Assign Simple Assign Add Assign Subtract Assign Multiply Assign Divide Assign Remainder Assign Colon Assign AND Assign OR Assign Nullish JS Arithmetic
๐ŸŒ
freeCodeCamp
freecodecamp.org โ€บ news โ€บ javascript-advanced-operators
Advanced JavaScript Operators โ€“ Nullish Coalescing, Optional Chaining, and Destructuring Assignment
January 4, 2024 - Hi Everyone! In this article, I'm going to teach you how to use three advanced JavaScript operators: the Nullish Coalescing, Optional Chaining, and Destructuring Assignment operators. These three operators will help you write clearer and less error-p...
๐ŸŒ
Beyondjava
beyondjava.net โ€บ elvis-operator-aka-safe-navigation-javascript-typescript
Elvis Operator (aka Safe Navigation) in JavaScript and TypeScript
None of these solutions reach the beauty and simplicity of the Elvis operator, but they are close enough to render programmers of many other languages, such as Java, flabbergasted. When I was new to JavaScript, I went the hard way and added two checks to each and every navigation: if ((typeof person !== "undefined") && (person !== null)) { person.greet(); }
๐ŸŒ
JavaScript Tutorial
javascripttutorial.net โ€บ home โ€บ javascript tutorial โ€บ javascript optional chaining operator
JavaScript Optional Chaining Operator (?.)
December 17, 2023 - objectName ?. propertyName objectName ?. [expression]Code language: JavaScript (javascript) The optional chaining operator implicitly checks if the user is not null or undefined before attempting to access the user.profile:
๐ŸŒ
DEV Community
dev.to โ€บ pichardoj โ€บ optional-null-safe-in-javascript-1b7k
Optional (null-safe) in javascript - DEV Community
July 20, 2021 - This issue is not exclusive of javascript, it is present in most programming languages, so let's see how to do null-checking in some of them. ... SomeClass object; Optional.ofNullable(object) .map(obj -> obj.prop1) .map(obj -> obj.prop2) .map(obj -> obj.prop3) .orElse("SomeDefaultValue"); In kotlin (another JVM language) there are the elvis (?:) and safe-call (?.) operators.
๐ŸŒ
Wikipedia
en.wikipedia.org โ€บ wiki โ€บ Safe_navigation_operator
Safe navigation operator - Wikipedia
1 month ago - In programming languages where the navigation operator (e.g. ".") leads to an error if applied to a null object, the safe navigation operator stops the evaluation of a method/field chain and returns null as the value of the chain expression. It was first used by Groovy 1.0 in 2007 and is currently ...
๐ŸŒ
Medium
medium.com โ€บ @zayani.zied โ€บ safe-navigation-operator-optional-chaining-js-and-angular-d253431a2625
Safe Navigation Operator-Optional Chaining (JS and Angular) | by Zied ZAYANI | Medium
February 20, 2023 - The safe navigation operator, also ... is a feature that allows us to safely access properties or functions of an object without throwing an error if any of the properties in the chain are nullish (null or undefined)....
๐ŸŒ
Medium
armanco.medium.com โ€บ null-undefined-safety-in-typescript-165fb4977194
Null (Undefined) Safety in TypeScript | by Arman Kolahan | Medium
November 28, 2020 - Use optional chaining operator (?.) in chains, makes your code safer and shorter. Nullish Coalescing is a useful operator that can be used to set a default value in case a variable is null or undefined.
๐ŸŒ
freeCodeCamp
forum.freecodecamp.org โ€บ javascript
What Is the Optional Chaining Operator, and How Does It Work? - JavaScript - The freeCodeCamp Forum
April 8, 2025 - TLDR: Optional Chaining Operator is for objects, not properties? https://www.w3schools.com/jS/js_2020.asp " The Optional Chaining Operator returns undefined if an object is undefined or null (instead of throwing an error)."
๐ŸŒ
W3Schools
w3schools.com โ€บ typescript โ€บ typescript_null.php
TypeScript Null & Undefined
It allows writing expressions that have a fallback specifically when dealing with null or undefined. This is useful when other falsy values can occur in the expression but are still valid. It can be used with the ?? operator in an expression, ...