Este mecanismo se introdujo en la versión EcmaScript 2020 o ES11 y es quizás más conocido como optional chaining. Es una forma segura de acceder a propiedades de un objeto incluso cuando estas puedan no existir.
El problema viene por el undefined
En JavaScript, si intentas acceder a una propiedad anidada de un objeto y alguna de las propiedades intermedias no existe, se lanza un error.
En el ejemplo de arriba, si accedemos a la propiedad direccion simplemente veremos que devuelve un undefined. No provoca ningún error. El problema viene cuando intentamos ir un poco más allá.
En este caso sí obtenemos un error. Estamos intentando acceder a la propiedad calle dentro de la propiedad direccion, que no existe.
Optional chaining es la solución
Solo tenemos usar el símbolo de interrogante delante del punto y ya podremos acceder a tantas propiedades anidadas como queramos:
Al menos con este mecanismo podemos continuar la ejecución y evitar este tipo de errores. Muy útil cuando tenemos que acceder a propiedades anidadas y sabemos que es posible que todavía no existan.
Esto es aplicable también a llamadas a funciones o para acceder a arrays. Nos ahorra muchas líneas de comprobaciones con condicionales. Puedes ver algunos ejemplos más en la documentación de MDN.