I couldn't confirm if this syntax correct or not.
It is correct TypeScript code, and is correct JavaScript depending on what engine you're running it in. Chrome (V8) supports this syntax already (see caniuse.com).
Here you can read more about the proposal to add this syntax to a future JS spec.
What is it?
This syntax is called the optional chaining operator, and it allows you to access properties that may or may not exist on an object without having to check for the properties existence no matter how deep the property access expression is.
For example, say we have some object like so:
const user = {
details: {
name: "SpongeBob SquarePants"
},
repo: null
};
And we want to get their name and, if it exists, some property user.repo.url. We can use the optional chaining operator to get both without having to worry whether repo is an object or not:
console.log(user.details.name) //=> "SpongeBob SquarePants"
console.log(user.repo.url) //=> undefined
It also works for function calls. For example, say when user.repo has a value we know it will be a function that returns a string. However, sometimes, as above, it may not be a function. We can do the following to call the function if it exists, but the code will not throw an error if the value at user.repo.url is not a function:
console.log(user.repo?.url()) //=> undefined
Without optional chaining operator?
You can achieve the similar behaviour to the optional chaining operator by explicitly checking the truthiness of each object property in the chain of properties that you are accessing.
This can be done either by taking advantage of JavaScript's short-circuit evaluation behaviour, or more obviously with the ternary operator.
It would look something like this:
function getItems_shortCircuit(obj) {
return obj && obj.widgets && obj.widgets.items
}
function getItems_ternary(obj) {
return obj
? obj.widgets
? obj.widgets.items
? obj.widgets.items
: null
: null
: null
}
let cart = {
widgets: null
}
console.log(getItems_shortCircuit(cart)) //=> null
cart.widgets = {
items: ["a", "b"]
}
console.log(getItems_ternary(cart)) //=> ["a", "b"]
My concern with above code is whether cart?.widgets?.items will raise any error or not.
It depends on whether the project is using TypeScript, which supports optional chaining (?.) out-of-the-box. You can read about it in the TypeScript documentation.
If you are not using TypeScript then you must compile your application using some ESNext compiler such as Babel, which has the @babel/plugin-proposal-optional-chaining plugin.
