JavaScript - Chaînage Optionnel

Salut à toi, futurs magiciens JavaScript ! ? Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte du monde du Chaînage Optionnel. Ne t'inquiète pas si tu es nouveau dans le monde de la programmation - je serai ton guide amical, et nous avancerons pas à pas. À la fin de cette leçon, tu chaîneras comme un pro ! C'est parti !

Le Problème de la Propriété Inexistante

Imagine que tu essaies de trouver un livre dans une bibliothèque massive. Tu sais qu'il devrait être dans la section "Science Fiction", au troisième étage, dans le coin arrière. Mais que se passe-t-il si la bibliothèque n'a même pas de troisième étage ? Ou si il n'y a pas de section "Science Fiction" ? C'est ce genre de problème que nous rencontrons souvent en JavaScript lors de la manipulation d'objets imbriqués.

Regardons un exemple :

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi.books);

Si tu exécutes ce code, tu obtiendras une erreur : "Cannot read property 'books' of undefined". Pourquoi ? Parce que library.fiction.sciFi n'existe pas ! C'est là que le Chaînage Optionnel entre en jeu.

Qu'est-ce que le Chaînage Optionnel en JavaScript ?

Le Chaînage Optionnel est comme un filet de sécurité pour ton code. Il te permet d'accéder aux propriétés imbriquées d'un objet sans t'inquiéter si les propriétés intermédiaires existent. Il est représenté par l'opérateur ?..

Reprenons notre exemple précédent avec le Chaînage Optionnel :

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi?.books);

Au lieu de lancer une erreur, cela renverra simplement undefined. C'est comme demander : "Si sciFi existe, peux-tu me donner ses books ? Si non, pas de souci !"

Chaînage Optionnel avec des Appels de Fonction

Le Chaînage Optionnel n'est pas seulement pour les propriétés d'objet. Tu peux l'utiliser avec des appels de fonction également ! Imaginons que nous avons un système de bibliothèque où les livres peuvent être empruntés :

const library = {
fiction: {
fantasy: {
checkOut: function(book) {
console.log(`Checking out ${book}`);
}
}
}
};

library.fiction.fantasy.checkOut?.('The Hobbit');
library.fiction.sciFi?.checkOut?.('Dune');

Dans cet exemple, 'The Hobbit' sera emprunté, mais rien ne se passera avec 'Dune' parce que sciFi n'existe pas. Pas d'erreurs, juste un voyage en douceur !

Chaînage Optionnel avec une Expression

Tu peux également utiliser le Chaînage Optionnel avec la notation entre crochets. Cela est utile lorsque tes noms de propriétés sont dynamiques ou contiennent des caractères spéciaux :

const users = {
'123': { name: 'Alice', age: 30 },
'456': { name: 'Bob', age: 25 }
};

const userId = '789';
console.log(users[userId]?.name);

Cela renverra undefined parce qu'il n'y a pas d'utilisateur avec l'ID '789', mais il ne lancera pas d'erreur.

Chaînage Optionnel avec l'Opérateur "delete"

L'opérateur delete peut également être utilisé avec le Chaînage Optionnel. C'est pratique lorsque tu veux supprimer une propriété qui pourrait ne pas exister :

const obj = {
prop: {
innerProp: 'value'
}
};

delete obj.prop?.innerProp;
delete obj.nonExistent?.prop;

La première suppression fonctionnera comme prévu, enlevera innerProp. La seconde ne fera rien, mais ne lancera pas d'erreur.

Court-circuit avec le Chaînage Optionnel

Le Chaînage Optionnel a une fonctionnalité sympa appelée court-circuit. Si la partie gauche du ?. est null ou undefined, l'évaluation s'arrête et renvoie undefined :

const obj = null;
console.log(obj?.prop?.subProp);  // Renvoie undefined

Cela est super utile pour éviter ces erreurs embêtantes "Cannot read property of null" !

Opérateur de Coalescence Nul avec le Chaînage Optionnel

L'Opérateur de Coalescence Nul (??) fonctionne très bien avec le Chaînage Optionnel. Il te permet de fournir une valeur par défaut si le résultat du Chaînage Optionnel est null ou undefined :

const user = {
name: 'Alice',
details: {
age: 30
}
};

console.log(user.details?.job ?? 'unemployed');  // Renvoie 'unemployed'
console.log(user.details?.age ?? 'unknown');     // Renvoie 30

C'est parfait pour fournir des valeurs de secours lorsque des propriétés pourraient ne pas exister.

Voici un tableau récapitulatif des méthodes que nous avons couvertes :

Méthode	Syntaxe	Description
Accès à la Propriété	obj?.prop	Accéder en toute sécurité aux propriétés imbriquées d'un objet
Appel de Fonction	func?.()	Appeler en toute sécurité une fonction qui pourrait ne pas exister
Expression	obj?.[expr]	Accéder en toute sécurité aux propriétés avec des noms dynamiques ou spéciaux
Opérateur "delete"	delete obj?.prop	Supprimer en toute sécurité une propriété qui pourrait ne pas exister
Court-circuit	obj?.prop?.subProp	Arrête l'évaluation si une partie est null ou undefined
Avec l'Opérateur de Coalescence Nul	obj?.prop ?? defaultValue	Fournir une valeur par défaut pour les résultats null ou undefined

Et voilà, les amis ! Tu viens de monter en niveau tes compétences JavaScript avec le Chaînage Optionnel. Souviens-toi, coder c'est comme construire avec des LEGO - commence par les bases, et avant de t'en rendre compte, tu seras en train de créer des œuvres d'art. Continue à pratiquer, reste curieux, et bon codage ! ??‍??‍?

Credits: Image by storyset