TypeScript / Operador de encadenamiento

Bienvenidos sean a este post, hoy veremos un operador muy util para nuestras propiedades de objetos.

Hasta ahora vimos mucho sobre los tipos de datos, algunas operaciones, tipos que nos permiten manejar los datos de una forma u otra. Pero algo que no hemos mencionado hasta ahora de las propiedades de los objetos de javascript, es que debemos asegurarnos que sus propiedades anidadas existan antes de ser accedidas, para entender este concepto vamos a analizar el siguiente ejemplo:

let obj = {
        anidado: {
                nombre: "propiadad anidada"
        }
}
function mostrarAnidado(o)
{
        console.log("o.anidado.nombre: "
                + o.anidado.nombre);
}
mostrarAnidado(obj);

Un codigo simple donde primero definimos un objeto que posee una propiedad anidada y a su vez tiene una propiedad llamada nombre con un valor, despues tenemos una funcion que mostrara el valor de esta propiedad en base al objeto que informemos, por ultimo llamamos a esta funcion y le pasamos el objeto anterior, veamos como es su salida:

$ node cadena.js
o.anidado.nombre: propiadad anidada
$

Como pueden ver funciono como debia pero que sucede si hacemos la siguiente modificacion:

let obj = {
        anidado: {
                nombre: "propiadad anidada"
        }
}
function mostrarAnidado(o)
{
        console.log("o.anidado.nombre: "
                + o.anidado.nombre);
}
mostrarAnidado(obj);
mostrarAnidado({});

En este caso agregamos una nueva linea donde llamamos a la funcion pero con un objeto vacio, veamos que sucede:

tinchicus@dbn001vrt:~/lenguajes/ts/12$ node cadena.js
o.anidado.nombre: propiadad anidada
/home/tinchicus/lenguajes/ts/12/cadena.js:8
        + o.anidado.nombre);
                    ^

TypeError: Cannot read properties of undefined (reading 'nombre')

Ok, aqui vemos que se interrumpio el programa debido a que no encontro tal propiedad, si este fuera un codigo mas extenso y tuviera mas instrucciones, estas nunca se hubieran ejecutado pero como podemos solucionarlo? podemos usar la siguiente opcion:

let obj = {
        anidado: {
                nombre: "propiedad anidada"
        }
}
function mostrarAnidado(o)
{
        if (o != undefined
                && o.anidado != undefined
                && o.anidado.nombre != undefined)
        {
                console.log("o.anidado.nombre: "
                        + o.anidado.nombre);
        } else {
                console.log("nombre no fue definido o encontrado");
        }
}
mostrarAnidado(obj);
mostrarAnidado({});

En este caso agregamos un condicional en la funcion donde evalua las tres posibilidades del objeto pasado como argumentos:

• Si el objeto es distinto de undefined
• Si la propiedad anidado es distinto de undefined
• Si la propiedad nombre es distinto de undefined

Al utilizar el operador AND este solo devolvera un true si los tres elementos evaluados son verdaderos, en ese caso significa que esta todo correcto y por lo tanto mostraremos el valor de nombre, en caso contrario mostraremos un mensaje donde indicaremos que no fue definido o encontrado, el resto del codigo es el mismo al anterior, probemos a ver como funciona ahora:

$ node cadena.js
o.anidado.nombre: propiedad anidada
nombre no fue definido o encontrado
$

Ahora no nos devolvio un error sino la notificacion de cuando sucede esto sin interrumpir la ejecucion del codigo. Si bien con esto tenemos una gran solucion pero el equipo desarrollador de typescript siguio trabajando duro para mejorar esto. Para esto creo el operador del encadenamiento opcional que se implemento en ECMAScript pero a partir de la version ES2020, para entenderlo mejor vamos a tomar el codigo anterior y lo modificaremos de la siguiente manera:

let obj = {
        anidado: {
                nombre: "propiedad anidada"
        }
}
function mostrarAnidado(o)
{
        if (o?.anidado?.nombre) {
                console.log("o.anidado.nombre: "
                        + o.anidado.nombre);
        } else {
                console.log("nombre no fue definido o encontrado");
        }
}
mostrarAnidado(obj);
mostrarAnidado({ anidado: { nombre: null }});
mostrarAnidado({anidado: { nombre: "Otra propiedad anidada"}});
mostrarAnidado({});

La modificacion fue minima pero notoria. Seguimos manteniendo el condicional pero quitamos las condiciones que usamos para evaluar y reemplazamos por el signo de interrogacion detras de cada objeto salvo en el ultimo. Este operador se encarga de verificar de que cada objeto posea al siguiente con lo cual al no encontrarlo establecera un valor de tipo undefined y por lo tanto sera un false, pero esto tiene una particularidad de la cual hablaremos en breve. El resto sigue de la misma forma, pero ahora agregamos un par de llamados mas a la funcion:

• El primero sigue llamando al objeto creado al inicio
• El segundo tiene una tabla similar a la de obj pero nombre sera null
• El tercero tiene una tabla donde nombre tiene otro valor
• El cuarto es el que vinimos teniendo vacio

Con esto tenemos varias posibilidades y sobre todo deben prestar atencion al segundo llamado, compilemos y veamos la salida:

$ node cadena.js
o.anidado.nombre: propiadad anidada
nombre no fue definido o encontrado
o.anidado.nombre: Otra propiedad anidada
nombre no fue definido o encontrado
$

Observen como el primer y el tercer campo nos devolvio el valor de nombre pero nos devolvio el indicador de no encontrado para el segundo caso y cuarto caso, en el segundo caso es debido a que nombre tiene el valor null por lo tanto considera que no existe (o tenga un valor) y en ese caso devuelve un false, con esto tenemos una opcion muy simple para hacer estas verifficaciones facilitando nuestras tareas.

En resumen, hoy hemos visto el encadenamiento opcional, que es, como se utiliza, por que se creo, como nos facilita la tarea que vimos en este post, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.