Question mark before dot in javascript / react
ReactjsReact NativeReactjs Problem Overview
I know what ternary operator is in React.
When I'm developing react native app I encounter this kind of syntax that is covered by my eslint as unexpected token
ESLint: Parsing error: Unexpected token .
It goes like this:
const routeName = route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;
What does that mean? It uses null coalescing operator in the end, however I can't understand what does the question mark do before a dot.
I know it is a correct syntax because it is a template from expo and they're very popular in react-native development community.
Can anyone help me explain?
Reactjs Solutions
Solution 1 - Reactjs
That's optional chaining: MDN
> 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.
>
> The ?.
operator is like the .
chaining operator, except that instead of causing an error if a reference is nullish (null
or undefined
), the expression short-circuits with a return value of undefined
. When used with function calls, it returns undefined
if the given function does not exist.
>
> This results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing. It can also be helpful while exploring the content of an object when there's no known guarantee as to which properties are required.