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

Question

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.log(obj?.b);

without an error. It will return undefined if there is no property named b in the obj object. Now, this is working for the first level of (.) operators. But if I try something like this,

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

This is throwing an error,

Uncaught TypeError: obj.c is undefined // In firefox it throws obj.b is undefined.

But if I write,

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

It is returning undefined again. Shouldn't it be returning Uncaught TypeError: obj.b.c is undefined?

Is this some implementation gap or am I missing something here? Thanks in advance.

It is resolved now. @Ifaruki's comment has the proper explanation.

Update:its called "chaining" operator. it moves from left to right. if it sees ?. it checks the left value if its undefined. 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

its called "chaining" operator. it moves from left to right. if it sees `?.` it checks the left value if its undefined. 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 — bill.gates, Oct 28 '20 at 13:34
_"It will return `undefined` if there is no property named `b` in the `obj` object"_. It's more like: "It will return `undefined` if the object `obj` itself is `null` or `undefined`; or if the object `obj` exists but doesn't have the property `b`." — ibrahim mahrir, Oct 28 '20 at 13:36
_"The `?.` operator functions similarly to the `.` chaining operator, except that instead of causing an error if a reference is `null`ish (`null` or `undefined`), the expression short-circuits with a return value of `undefined`."_ — Andreas, Oct 28 '20 at 13:39
Thanks all. @Ifaruki, your explanation was helpful especially. — Md Sabbir Alam, Oct 28 '20 at 13:42
In both your first and second example, the optional chaining operator makes no difference from the regular property accessor. `obj?.b` simply reads `b` (which is `undefined`), since `obj` is not nullish. — Ivar, Oct 28 '20 at 13:42

score 4 · Accepted Answer · edited Apr 06 '23 at 15:53

4

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

edited Apr 06 '23 at 15:53

sKopheK

149
13

answered Oct 28 '20 at 13:45

bill.gates

14,145
3
19
47

score 1 · Answer 2 · edited Oct 28 '20 at 13:43

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'
}

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

2 Answers2

Linked