Encontré un caso de uso realmente excelente para el encadenamiento opcional en mi proyecto de reacción. Lo he usado un poco antes, pero esta línea de código me ha confundido un poco.
Tengo una tabla que se puede ordenar. Una de las columnas muestra el éxito o el fracaso dependiendo de si failed_date es nulo o una fecha.
sortedRows = sortedRows.sort((a, b) => a?.failed_date?.localeCompare(b?.failed_date));Pero lo que me confunde es qué valor tiene el '?'. el cheque es nulo?
¿ a.failed_date?.localeCompare() comprueba si failed_date?. es nulo/indefinido o comprueba si ?.localeCompare() es nulo/indefinido?
Lo mismo con b?.failed_date está comprobando que b es nulo? o fecha_fallida.
Creo que mi confusión proviene de mirar la documentación .
Porque arr?.[50] comprueba si el elemento 50 es nulo pero obj.method?.() comprueba si el método no es nulo?
Mirando este segundo bloque de código (que creo que ahora es correcto), a.failed_date puede ser nulo y no hará localeCompare si a.failed_date es nulo? Pero, ¿qué pasa si a.failed_date no es nulo pero b.failed_date es nulo? ¿A localeCompare no le importa? No he recibido ningún error pero estaba usando localeComapre(b?.failed_date)
sortedRows = sortedRows.sort((a, b) => a.failed_date?.localeCompare(b.failed_date));Digamos que define la variable como a continuación
const variable = { value: 'test' }; entonces quiere acceder a la variable?.value es igual a variable === null || variable === undefined ? undefined : variable.value .
Lo mismo con la matriz.
Verifique el patio de juegos mecanografiado y vea la salida js https://www.typescriptlang.org/play?#code/MYewdgzgLgBAhgJwXAnjAvDA2gXQNwBQBiyKA-AHRYCsADDkA
Básicamente, el ? en ese contexto significa encadenamiento opcional .
La forma en que funciona es, por ejemplo, si define un objeto como el siguiente y desea intentar acceder a la propiedad de views , arrojará un error.
const obj = { website: "stackoverflow.com", }; console.log(obj.views.toFixed(0)); // Error! Esto se debe a que está intentando acceder a un método fuera de undefined , que no tiene nada.
Para evitar este error, podemos usar el encadenamiento opcional , como se muestra a continuación.
const obj = { website: "stackoverflow.com", }; console.log(obj?.views?.toFixed(0)); // undefined El encadenamiento opcional le dice a JavaScript que complete el método/lea la clave, pero si no existe, en lugar de arrojar un error, simplemente devuelva undefined .
También funciona con arreglos; de la misma manera! Si, por ejemplo, el índice 78 no existe, en lugar de arrojar un error, simplemente devolverá undefined .
const arr = [1, 2, 3]; console.log(arr?.[78]?.toString());