JavaScript question mark dot is called optional chaining operator. It allows reading the value of a property located in a Nested object.
obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)Simple optional chaining ?. stops the evaluation if the value before ?. is undefined or null and returns undefined.
JavaScript question mark dot
Simple example code.
<!DOCTYPE html>
<html>
<body>
<script>
const adventurer = {
name: 'Alice',
cat: {
name: 'Dinah',
sound: 'Meow'
}
};
const dogName = adventurer.dog?.name;
console.log(dogName);
const catName = adventurer.cat?.name;
console.log(catName);
console.log(adventurer.cat?.sound);
</script>
</body>
</html>
Output:
Combining with Nullish Coalescing operator
The Nullish coalescing operator compares and returns the value on the right when the value on the left is null/undefined. This is used to set the default value
const data = { };
const name = data.user?.name ?? 'not found';
console.log(name); // not foundWhat does the question mark followed by a full stop in javascript mean?
Answer: It’s Optional chaining.
React.useEffect(() => {
if (route.params?.post) {
// Post updated, do something with `route.params.post`
// For example, send the post to the server
}
}, [route.params?.post]);Why is it necessary to use the dot operator before the optional chaining?
Answer: Use the dot operator after trying to do the optional chaining.
The reason is that ? and ?. are two different things. Only the latter is Option chaining, so if you remove the period, you have a start of a ternary operation.
Also, note that The optional chaining ?. is not an operator, but a special syntax construct.
Do comment if you have any doubts or suggestions on this Js operator topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.