Best Practices voor Conditionele Statements in JavaScript
Dit artikel legt de best practices voor conditionele statements in JavaScript uit.
YouTube Video
Best Practices voor Conditionele Statements in JavaScript
if-statements zijn een fundamentele controle-structuur in JavaScript-programma's. Echter, naarmate de code complexer wordt, kan het aantal if-statements toenemen, waardoor de code moeilijker te lezen is. Deze keer zullen we dieper ingaan op de best practices voor het correct ontwerpen van if-statements in JavaScript om de leesbaarheid en onderhoudbaarheid te verbeteren.
Vereenvoudig code door gebruik te maken van vlaggen
Vereenvoudig voorwaarden met meerdere criteria door gebruik te maken van booleaanse waarden.
Voorbeelden om te vermijden
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Verbeterde voorbeelden
Gebruik vlaggen om voorwaarden te verduidelijken.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Houd Conditionele Statements Simpel
Wanneer een voorwaardelijke expressie complex wordt, neemt de codeleestbaarheid af, dus is het noodzakelijk om de voorwaarde simpel te houden.
Voorbeelden om te vermijden
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Verbeterde voorbeelden
Door de voorwaarde op te splitsen in variabelen met specifieke betekenissen, kunt u de intentie verduidelijken.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Verduidelijk de prioriteit van logische operatoren
In JavaScript-if-verklaringen kan een misverstand over de prioriteit van logische operatoren leiden tot onbedoeld gedrag.
Voorbeelden om te vermijden
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}Verbeterde voorbeelden
Als de prioriteit van operatoren onduidelijk is, kun je haakjes gebruiken om dit te verduidelijken.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Het gebruiken van kortsluit-evaluatie
JavaScript ondersteunt short-circuit evaluatie voor zowel de && (EN) als de || (OF) operatoren. Short-circuit evaluatie betekent dat wanneer het resultaat van een voorwaarde tijdens de evaluatie is bepaald, het resterende deel niet wordt geëvalueerd.
AND(&&): Als de linkerzijde wordt geëvalueerd als onwaar, wordt de rechterzijde niet geëvalueerd en wordt de waarde daarvan geretourneerd.OR(||): Als de linkerzijde wordt geëvalueerd als waar, wordt de rechterzijde niet geëvalueerd en wordt de waarde daarvan geretourneerd.
Voorbeelden om te vermijden
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Verbeterde voorbeelden
In deze code wordt de functie user?.someComplexFunction() aangeroepen, zelfs als user?.isLoggedIn false is.
Het begrijpen van short-circuit evaluatie kan u helpen onnodige berekeningen te vermijden en efficiënte code te schrijven.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimaliseer het Gebruik van else-Statements
else-statements kunnen de cognitieve belasting verhogen bij het volgen van de code. Overweeg in plaats daarvan vroegtijdige returns te gebruiken.
Voorbeelden om te vermijden
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Verbeterde voorbeelden
Verduidelijk voorwaarden met vroege returns.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Correct Gebruik van de Ternary Operator
Voor eenvoudige voorwaarden kan het gebruik van een ternaire operator je code verkorten. Vermijd echter geneste of complexe logica.
Voorbeelden om te vermijden
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Verbeterde voorbeelden
Geef prioriteit aan leesbaarheid door voorwaarden op te splitsen.
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}Het gebruiken van standaardwaarden en kortsluit-evaluatie
Gebruik standaardwaarden en kortsluitevaluaties om vertakkingen te verminderen en code te vereenvoudigen.
Voorbeelden om te vermijden
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Verbeterde voorbeelden
In dit geval maakt het gebruik van logische operatoren het beknopter.
1// Good Example
2displayName = user?.name || 'Guest';Maak een duidelijk onderscheid wanneer je switch-verklaringen gebruikt
Wanneer meerdere voorwaarden nodig zijn, kunnen switch-verklaringen de bedoelingen verduidelijken.
Voorbeelden om te vermijden
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}Verbeterde voorbeelden
Het gebruik van switch-verklaringen kan helpen bij het organiseren van de 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}Het gebruiken van beschermclausules met vroege uitstapvoorwaarden
Een guard clause is een techniek die gebruik maakt van if-verklaringen om een functie vroegtijdig te verlaten.
Voorbeelden om te vermijden
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}Verbeterde voorbeelden
Gebruik guard clauses om geneste structuren te verminderen.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Schrijf opmerkingen om bedoelingen te verduidelijken
Voor complexe voorwaarden of kritische vertakkingen, voeg beknopte en duidelijke opmerkingen toe om de bedoeling van de code over te brengen.
Voorbeelden om te vermijden
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Verbeterde voorbeelden
Voeg opmerkingen toe om bedoelingen duidelijk te maken.
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}Conclusie
Het effectief gebruiken van JavaScript's if-verklaringen kan de leesbaarheid en onderhoudbaarheid van de code aanzienlijk verbeteren.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.