javascript optional chaining operator - Brave Search

How does the JavaScript optional chaining(?.) operator works?

stackoverflow.com › questions › 64573952 › how-does-the-javascript-optional-chaining-operator-works

Its called "optional chaining" operator. It moves from left to right. if it sees ?. it checks the left value if its undefined or null. if yes, it returns undefined and stops moving to the right. that means if b is already undefined it wont check the values on the right side

Answer from Ilijanovic on Stack Overflow

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.

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 er…

Discussions

ecmascript next - How does the JavaScript optional chaining(?.) operator works? - Stack Overflow

I was looking into the new JS optional chaining?. operator. It helps us from getting errors like this, TypeError: Cannot read property ‘x’ of undefined You can write const obj = {a: 1}; console.lo... More on stackoverflow.com

stackoverflow.com

[AskJS] Over-using optional chaining. Is this pattern common?

Optional chaining is great. I find it however quite frustrating that TC39 included the "optional call" syntax that you're illustrating. THAT is a terrible feature that should be avoided, IMO. Besides it looking weird (like a typo), one reason I dislike it so much is that it seems (to the reader) like it's checking if the function can be called, and only calling it if safe to do so. But that's not what it's doing. It's only checking if the callee is not-nullish. var isThisAFunction1 = null; var isThisAFunction2 = "oops"; // later isThisAFunction1?.(); // safely a no-op isThisAFunction2?.(); // Exception! More on reddit.com

r/javascript

25

5

January 18, 2021

[AskJS] Is it a problem if the code base is filled with optional chaining?

A mantra in the Zig community that is applicable here: "Handled errors are better than exceptions, but exceptions are better than bugs" More on reddit.com

r/javascript

43

15

July 17, 2024

The Optional Chaining Operator, “Modern” Browsers, and My Mom

This only reconfirmed my parents’ belief that device makers deliberately make things go out of date so that you have to go buy new hardware every couple of years. Well, your parents are not wrong. More on reddit.com

r/webdev

60

155

October 8, 2021

Videos

Optional Chaining In JavaScript: Awesome. - YouTube

January 30, 2024

Optional Chaining (?.) In 2 Minutes - ES2020 - YouTube

August 17, 2023

Optional Chaining in JavaScript - YouTube

September 4, 2025

Optional Chaining Operator (?.) in JavaScript - YouTube

Optional Chaining Operator in JavaScript, Simplified - YouTube

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 January 12, 2026

stackoverflow.com › questions › 64573952 › how-does-the-javascript-optional-chaining-operator-works

ecmascript next - How does the JavaScript optional chaining(?.) operator works? - Stack Overflow

Its called "optional chaining" operator. It moves from left to right. if it sees ?. it checks the left value if its undefined or null. if yes, it returns undefined and stops moving to the right. that means if b is already undefined it wont check the values on the right side

In the example below, obj has only one key a.

const obj = {a: 1};
console.log(obj?.b);

In the above code snippet, there is no property b in object because of which it is printing undefined.

console.log(obj.b.c.d?.e);
console.log(obj.b?.c.d?.e);

Even in the code above, the same thing is happening where the object is not having key b hence it is printing undefined. So if you want to see that obj.b.c is undefined then the object should look the one below:

obj: {
    b: '123'
}

JavaScript.info

javascript.info › tutorial › the javascript language › objects: the basics

Optional chaining '?.'

There’s a little better way to write it, using the && operator: let user = {}; // user has no address alert( user.address && user.address.street && user.address.street.name ); // undefined (no error) AND’ing the whole path to the property ensures that all components exist (if not, the evaluation stops), but also isnt ideal. As you can see, property names are still duplicated in the code. E.g. in the code above, user.address appears three times. That’s why the optional chaining ?.

reddit.com › r/javascript › [askjs] over-using optional chaining. is this pattern common?

r/javascript on Reddit: [AskJS] Over-using optional chaining. Is this pattern common?

January 18, 2021 -

Hi everyone!

I love optional chaining, i really do, but there are some cases where using this syntax damages the readability of the code. One of those cases is the following

function optionalFunction(){     
    console.log("works"); 
}  
// optionalFunction = undefined;  

optionalFunction?.();

While i understand this approach, i find it optionalFunction?.() harder to read as opposed to this

function optionalFunction(){     
    console.log("works"); 
}  
// optionalFunction = undefined;  

if(optionalFunction != undefined){     
    optionalFunction(); 
}

I think i'd rather have a more readable and stronger check than ES6 magic when checking if an optional function is defined.

I believe that optional chaining fixes the problem of checking if a property of an object exists, and if exists, then get the value or keep going deeper in the object structure. But this syntax just looks weird for calling functions, it looks a lot like those "one line cleverness" code that sometimes people encounter.

What are your thoughts about this?

Optional chaining is great. I find it however quite frustrating that TC39 included the "optional call" syntax that you're illustrating. THAT is a terrible feature that should be avoided, IMO. Besides it looking weird (like a typo), one reason I dislike it so much is that it seems (to the reader) like it's checking if the function can be called, and only calling it if safe to do so. But that's not what it's doing. It's only checking if the callee is not-nullish. var isThisAFunction1 = null; var isThisAFunction2 = "oops"; // later isThisAFunction1?.(); // safely a no-op isThisAFunction2?.(); // Exception!

I haven't really started using optional chaining yet, but the idiom I mostly encounter for optional callbacks etc. is onEnd && onEnd() I would personally only use optional chaining for "deeply" nested properties. const city = user.?address?.city || defaultCity

dev.to › codeofrelevancy › javascripts-optional-chaining-operator-3pfn

JavaScript's Optional Chaining (?.) Operator - DEV Community

March 28, 2023 - The Optional Chaining ?. operator is a powerful tool for accessing object properties or calling functions in JavaScript. Unlike traditional methods, which can result in a TypeError when the object is undefined or null, the Optional Chaining ...

Find elsewhere

Google Bing Mojeek

medium.com › nerd-for-tech › using-the-optional-chaining-operator-in-javascript-aa56d19acef7

Using the optional chaining operator in JavaScript | by saransh kataria | Nerd For Tech | Medium

March 23, 2021 - And that is it, folks! The optional chaining operator allows easy access to nested properties without writing a lot of boilerplate code. It is important to note that it is not supported in IE. So, you might want to add a Babel plugin if you need to support that or older versions of browsers.

freecodecamp.org › news › optional-chaining-javascript

Optional Chaining in JavaScript – Explained with Examples

February 13, 2024 - The optional chaining operator (?.) allows you to access properties or methods without the need for explicit null or undefined checks.

medium.com › @mfarazali › optional-chaining-operator-in-javascript-5866c8cecc68

Optional Chaining Operator (?.) in Javascript | by Muhammad Faraz Ali | Medium

March 14, 2024 - Optional chaining is a powerful feature introduced in ECMAScript 2020 (ES11) that simplifies working with nested object properties and method calls. This operator brings a more concise and safer way to handle optional properties, instead of throwing an error “Cannot read property ‘x’ of undefined”.

medium.com › @johnnyfang_11536 › javascript-optional-chaining-operator-ec13c1015baa

[JavaScript] Optional Chaining Operator 可選串連運算子 | by Johnny Fang | Medium

August 30, 2025 - Optional Chaining Operator 是在 ...解的，原本取值就像是鎖鏈一樣把物件屬性串連起來（例如 cart.fruit.apple），而加個 optional 就有點可有可無的那種感覺，有的話就串連起來沒有就回傳個 undefined 這樣。...

freecodecamp.org › news › javascript-optional-chaining

How to Use Optional Chaining in JavaScript

February 7, 2022 - Optional chaining is a safe and concise way to perform access checks for nested object properties. The optional chaining operator ?. takes the reference to its left and checks if it is undefined or null. If the reference is either of these nullish ...

matthewshields.co.uk › using optional chaining and nullish coalescing operator in javascript

Using Optional Chaining and Nullish Coalescing Operator in JavaScript | Matthew Shields | Leeds based Web Developer

August 15, 2021 - As a general default though I would use the Nullish Coalescing Operator first and change only when required. The data situation that we have looked at so far is just a context that I think demonstrates the concept of Optional Chaining in an easy to understand way.

caniuse.com › mdn-javascript_operators_optional_chaining

JavaScript operator: Optional chaining operator (`?.`) | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

reddit.com › r/javascript › [askjs] is it a problem if the code base is filled with optional chaining?

r/javascript on Reddit: [AskJS] Is it a problem if the code base is filled with optional chaining?

July 17, 2024 -

Jumping into a new code base and it seems like optional chaining is used EVERYWHERE.

data?.recipes?.items
label?.title?.toUpperCase();
etc.

It almost seems like any time there is chaining on an object, it always includes the ?.

Would you consider this an anti-pattern? Do you see any issues with this or concerns?

A mantra in the Zig community that is applicable here: "Handled errors are better than exceptions, but exceptions are better than bugs"

Conditional access itself is not bad, no. What's bad is that what you're showing here implies that every piece of data here is basically "this could exist, or it could not, it's a suprise teehee!"

blog.openreplay.com › mastering-javascript-optional-chaining-and-nullish-coalescing

Mastering JavaScript: optional chaining and nullish coalescing

March 13, 2023 - The symbol used to denote Optional Chaining in JavaScript is the ?. (question mark followed by a period). Prior to Optional Chaining, developers often had to use the && (logical AND)operator to check if an object was null or undefined before accessing its properties.

gomakethings.com › the-optional-chaining-operator-in-vanilla-js

The optional chaining operator in vanilla JS | Go Make Things

Optional chaining is a browser-native way to chain methods or properties, and conditionally continue down the chain only if the value is not null or undefined.

udn.realityripple.com › docs › Web › JavaScript › Reference › Operators › Optional_chaining

Optional chaining (?.) - JavaScript

The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. The ?. operator functions similarly to the . chaining operator, except that instead of ...

Dmitri Pavlutin

dmitripavlutin.com › javascript-optional-chaining

How to Use JavaScript Optional Chaining

In the case of movieSmall, the property director is missing. As a result, movie.director?.name evaluates to undefined. The optional chaining operator prevents throwing TypeError: Cannot read property 'name' of undefined.

tutorialspoint.com › javascript › javascript_optional_chaining.htm

JavaScript - Optional Chaining

The optional chaining in JavaScript allows you to access nested properties and methods of an object without checking if each property exists. This can help to make your code more concise and easier to read. The optional chaining operator (?.) is sued to achieve optional chaining in JavaScript.