Meilleures pratiques pour les instructions conditionnelles en JavaScript
Cet article explique les meilleures pratiques pour les instructions conditionnelles en JavaScript.
YouTube Video
Meilleures pratiques pour les instructions conditionnelles en JavaScript
Les instructions if sont une structure de contrôle fondamentale dans les programmes JavaScript. Cependant, à mesure que le code devient plus complexe, le nombre d'instructions if peut augmenter, rendant le code plus difficile à lire. Cette fois, nous examinerons les meilleures pratiques pour concevoir correctement les instructions if en JavaScript afin d'améliorer leur lisibilité et leur maintenabilité.
Simplifiez le code en utilisant des drapeaux.
Simplifiez les conditions impliquant plusieurs critères en utilisant des valeurs booléennes.
Exemples à éviter
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Exemples améliorés
Utilisez des drapeaux pour clarifier les conditions.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Simplifiez les instructions conditionnelles
Lorsqu'une expression conditionnelle devient complexe, la lisibilité du code diminue, il est donc nécessaire de maintenir la condition simple.
Exemples à éviter
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Exemples améliorés
En décomposant la condition en variables aux significations spécifiques, vous pouvez clarifier son intention.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Clarifier la priorité des opérateurs logiques
Dans les instructions if en JavaScript, une mauvaise compréhension de la priorité des opérateurs logiques peut entraîner un comportement inattendu.
Exemples à éviter
1// Bad example
2if (isAdmin && isActive || isPremium) {
3 // The precedence of `&&` is higher than `||`,
4 // so this expression is interpreted as
5 // ((isAdmin && isActive) || isPremium)
6 console.log("Access granted");
7} else {
8 console.log("Access denied");
9}Exemples améliorés
Lorsque la priorité des opérateurs n'est pas claire, vous pouvez utiliser des parenthèses de manière appropriée pour clarifier.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Utiliser l'évaluation par court-circuit
JavaScript prend en charge l'évaluation à court-circuit pour les opérateurs && (ET) et || (OU). L'évaluation à court-circuit signifie que lorsque le résultat d'une condition est déterminé pendant l'évaluation, la partie restante n'est pas évaluée.
ET(&&) : Si le côté gauche est évalué comme faux, le côté droit n'est pas évalué et sa valeur est retournée.OU(||) : Si le côté gauche est évalué comme vrai, le côté droit n'est pas évalué et sa valeur est retournée.
Exemples à éviter
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Exemples améliorés
Dans ce code, la fonction user?.someComplexFunction() est appelée même si user?.isLoggedIn est false.
Comprendre l'évaluation à court-circuit peut vous aider à éviter les calculs inutiles et à écrire un code efficace.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimisez l'utilisation des instructions else
Les instructions else peuvent augmenter la charge cognitive lors du suivi du code. Envisagez plutôt d'utiliser des retours précoces.
Exemples à éviter
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Exemples améliorés
Clarifiez les conditions avec des retours précoces.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Utilisation correcte de l'opérateur ternaire
Pour des conditions simples, l'utilisation d'un opérateur ternaire peut raccourcir votre code. Cependant, évitez l'imbrication ou une logique complexe.
Exemples à éviter
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Exemples améliorés
Privilégiez la lisibilité en divisant les conditions.
1// Good Example
2if (!user.isLoggedIn) {
3 message = 'Please log in.';
4} else if (user.isAdmin) {
5 message = 'Welcome, admin!';
6} else {
7 message = 'Welcome, user!';
8}Utiliser des valeurs par défaut et l'évaluation par court-circuit
Utilisez des valeurs par défaut et l'évaluation à court-circuit pour réduire les embranchements et simplifier le code.
Exemples à éviter
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Exemples améliorés
Dans ce cas, l'utilisation d'opérateurs logiques rend cela plus concis.
1// Good Example
2displayName = user?.name || 'Guest';Différenciez correctement les situations où utiliser les instructions switch.
Lorsqu'il y a plusieurs conditions, les instructions switch peuvent clarifier les intentions.
Exemples à éviter
1// Bad Example
2if (status === 'success') {
3 console.log('Operation was successful.');
4} else if (status === 'error') {
5 console.error('There was an error.');
6} else if (status === 'pending') {
7 console.log('Operation is still pending.');
8} else {
9 console.log('Unknown status.');
10}Exemples améliorés
L'utilisation des instructions switch peut aider à organiser le code.
1// Good Example
2switch (status) {
3 case 'success':
4 console.log('Operation was successful.');
5 break;
6 case 'error':
7 console.error('There was an error.');
8 break;
9 case 'pending':
10 console.log('Operation is still pending.');
11 break;
12 default:
13 console.log('Unknown status.');
14}Utiliser des clauses de garde avec des conditions de sortie anticipée
Une clause de garde est une technique qui utilise des instructions if pour quitter une fonction de manière anticipée.
Exemples à éviter
1// Bad Example
2function processOrder(order) {
3 if (order && order.isValid) {
4 if (order.items && order.items.length > 0) {
5 // Continue processing
6 }
7 }
8}Exemples améliorés
Utilisez des clauses de garde pour réduire l'imbrication.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Rédigez des commentaires pour clarifier les intentions.
Pour des conditions complexes ou des branches critiques, ajoutez des commentaires concis et clairs pour exprimer l'intention du code.
Exemples à éviter
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Exemples améliorés
Ajoutez des commentaires pour rendre les intentions claires.
1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5 console.log('Available for purchase.');
6}Conclusion
Utiliser efficacement les instructions if en JavaScript peut grandement améliorer la lisibilité et la maintenabilité du code.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.