Chaînage facultatif, union avec null et comment ils modifient notre approche de l'écriture de code

Photo de Miguel Á. Padriñán .

Bonjour mes amis!

Je vous présente la traduction de l'article de Sam Sedighian «Chaînage optionnel, coalescence nulle et comment ils vont changer la façon dont vous écrivez le code» .

Chaînage facultatif, union avec null et comment ils modifient l'approche de l'écriture de code

Une manière plus sûre et ergonomique d'accéder à l'objet.

Si vous suivez les versions de TypeScript, vous savez que le chaînage facultatif et la coalescence nulle ont été introduits dans TypeScript 3.7. De plus, ces fonctionnalités sont incluses par défaut dans Babel 7.8.0. C'est l'un des principaux prétendants au rôle des fonctionnalités JavaScript. Actuellement, ils sont respectivement aux étapes 4 et 3 (le 23 janvier, la norme ECMAScript 2020 a été adoptée, où il y a une chaîne optionnelle, l'intégration avec null, et quelques choses intéressantes; je suis conscient qu'un article a récemment paru sur Habré une traduction sur les fonctionnalités introduites dans le JS ES2020, cependant, je pense que quelques exemples supplémentaires ne feront pas de mal - env.

Chaînage en option

Très souvent, nous devons accéder à la propriété profondément intégrée d'un objet. Si vous avez écrit 100 lignes de code de très mauvaise qualité, cela pourrait provoquer une erreur de type non détectée.

const data = {} data.user.id // Uncaught TypeError: Cannot read property 'id' of undefined //           -   

Pour d'autres exemples, nous utiliserons ce pseudo-code (fausse réponse du serveur):

 { 'url': 'https://api.github.com/repos/sedighian/Hello-World/pulls/12', 'number': 12, 'state': 'open', 'title': 'Amazing new feature', 'user': { 'login': 'sedighian', 'id': 123234 }, 'labels': [{ 'id': 208045946, 'name': 'bug', }] } 

En essayant d'éviter Uncaught TypeError et d'obtenir la valeur id, nous devons "faire un peu de danse". L'approche que nous avons utilisée auparavant était de vérifier la vérité de l'objet à chaque niveau d'imbrication. Ce modèle ressemble plus à une instruction conditionnelle qui renvoie un booléen qu'à un moyen d'accéder à une propriété, mais c'est le moyen le plus propre et le plus sûr que nous ayons trouvé jusqu'à présent:

 const userId = data && data.user && data.user.id //     const label = data && data.labels && data.labels[0] const someFuncRes = navigator && navigator.serviceWorker && window.serviceWorker() 

Ou, si vous préférez la déstructuration:

 const { user: { id } = {} } = data || {} //        const { user } = data || {} const { id } = user || {} 

Une manière plus ergonomique consiste à utiliser Lodash ou Ember:

 // lodash import _ from 'lodash' _.get(data, 'user.id') // ember import { get } from '@ember/object' get(data, 'user.id') 

Comment faire de même avec la chaîne en option?

 const userId = data?.user?.id //     const label = data?.labels?.[0] const someFuncRes = someFunc?.() 

Combinaison avec null (coalescence nulle)

Lorsque la valeur de propriété de l'objet auquel nous accédons est nulle ou non définie, nous utilisons la valeur par défaut. Auparavant, l'opérateur || (logique ou).

Si nous voulons écrire sedighian à la valeur de la propriété de connexion par défaut, nous procédons comme suit:

 //      data && data.user && data.user.login || 'sedighian' //     data?.user?.login || 'sedighian' //        null data?.user?.login ?? 'sedighian' 

Les deuxième et troisième exemples sont similaires. Quel est l'avantage de combiner avec null? La combinaison avec null n'évalue vers la droite que si le côté gauche n'est pas défini ou est nul. Cela nous donne une certaine protection contre les résultats aléatoires lorsque nous travaillons avec des valeurs réelles (valides), mais fausses.

Supposons que nous voulons retourner '' (chaîne vide), faux ou 0. Avec l'opérateur || Cela ne fonctionnera pas, car il retournera le côté droit. Dans ce cas, la combinaison avec null nous est utile:

 //  data.user.alias   ,     data?.user?.alias ?? 'code ninja' // '' data?.user?.alias || 'code ninja' // code ninja //  data.user.volumePreference = 0 data?.user?.volumePreference ?? 7 // 0 data?.user?.volumePreference || 7 // 7 //  data.user.likesCats = false data?.user?.likesCats ?? true // false data?.user?.likesCats || true // true 

Comme alternative, vous pouvez utiliser des bibliothèques tierces et, dans le cas d'Ember, un utilitaire intégré:

 // lodash import _ from 'lodash' _.get(data, 'user.likesCats', true) // ember import { getWithDefault } from '@ember/object' getWithDefault(data, 'user.likesCats', true) 

N'oubliez pas que la combinaison avec null est supérieure à la valeur par défaut d'une variable. Il s'agit d'une autre façon d'exécuter un bloc de code s'il n'y a pas de valeurs correspondantes:

 const temp = { celsius: 0 } temp?.fahrenheit ?? setFahrenheit(temp) 

Que faut-il retenir?

Rappelez-vous l'ordre des caractères dans la chaîne facultative (d'abord un point d'interrogation, puis un point):

 data.?user // Uncaught SyntaxError: Unexpected token '?' data?.user // ok 

La chaîne facultative ne protège pas contre l'appel d'une fonction inexistante:

 data?.user() // Ungaught TypeError: user is not a function 

La combinaison avec null n'est pas identique à lodash.get ou EmberObject.getWithDefault. La principale différence réside dans la manière dont la combinaison de c null gère la valeur "null":

 const data = { user: { interests: null } } // lodash import _ from 'lodash' _.get(data, 'user.interests', 'knitting') // null // ember import { get } from '@ember/object' getWithDefault(data, 'user.interests', 'knitting') // null //   null data?.user?.interests ?? 'knitting' // knitting 

Merci de votre attention. Mes meilleurs vœux.