its called Optional chaining (?.)
The optional chaining operator provides a way to simplify accessing values through connected objects when it's possible that a reference or function may be undefined or null.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
Answer from Jay on Stack OverflowVideos
its called Optional chaining (?.)
The optional chaining operator provides a way to simplify accessing values through connected objects when it's possible that a reference or function may be undefined or null.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
Just one thing to mention: You can not use the "Optional chaining operator (?.)" on a non-declared root object, but with an undefined root object. For instance, if you are trying to access the properties of a non-declared "obj" object, you will get an error:
console.log(obj?.someProperty);
**obj is not defined**
But if you have already declared your object and trying to access the property which is Null or undefined, you will get an undefined result :
const obj = {}
console.log(obj?.someProperty);
**undefined**
OCO is handy when you are working with the objects which are dynamically creating properties/assigning values to the properties, and you are not sure about the validation of the property you are trying to access/manipulate.
This is called optional chaining. You can find more information about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining.
But, given your example, the gist of it is that the question mark validates if there is a valid "data" object. If you do not have the question mark there and there is no data object or it is null, then an error will be thrown in the lines of "Cannot read the property data of 'undefined'".
Its the "optional chainging" operator.
Here an use case:
let obj = {};
console.log(obj?.person?.age);
console.log(obj.person.age);It comes handy if you try to access an property that not there. Its undefined so you get the error cannot get xx of undefined
To prevent this error you put an ?. infront of it, it will return an undefined back rather then throwing an error
Here some examples:
let obj = {};
//method does not exist
console.log(obj.func?.())
let arr = ["tom"];
console.log(arr[2]?.name);
let matrix = [ [ 1 ], [ 2 ] ];
console.log(matrix[5]?.[3]);
let defaultName = obj?.name ?? "Tom";
console.log(defaultName);It's called the Short-circuit evaluation and it's a feature of TypeScript. Not JavaScript .
When whatever before ? Is null or undefined, whatever after ?. Won't be called.
That's to avoid errors like: undefined has no property removeEventListener
Edit
I was wrong when I said it's not a feature of JavaScript. It's actually a new feature. Some browsers that are not updated to the latest don't support it yet (like mine)
Optional chaining (?.) The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining