What is the use of QuestionMark(?) in typescript variable?

Question

I have seen a scenario where in inside interpolation QuestionMark'?' is used with variable name. example : current?.sample.innerSample

I am not sure what it is used for. Any help is much appreciated.

Thank you

Answer 1

You can use typescript online console to check what does it mean. For example:

var obj = {
    a: {
        b: {
            c: null
        }
    }
};

var test = obj.a.b.c?.d;
console.log(test) // undefined

will be translated to:

"use strict";
var _a;
var obj = {
    a: {
        b: {
            c: null
        }
    }
};
var test = (_a = obj.a.b.c) === null || _a === void 0 ? void 0 : _a.d;
console.log(test); // undefined

If you do not put ? it will result in TypeError: Cannot read property 'd' of null as c is null and d is not defined

Answer 2

?. is a safe navigation operator. It prevents object paths from undefined or null reference errors. For ex:

If you write {{ data.somepropertyname }} in the template file without defining the data member variable in typescript file, it will throw an error like below

Cannot get somepropertyname of undefined

But if you write like this {{data?.somepropertyname}} it won't throw error

Check the example Stackblitz

Do comment and uncomment line numbers 8 & 9, you will see the output in the console