Beste praksis for betingelsesuttalelser i JavaScript
Denne artikkelen forklarer beste praksis for betingelsesuttalelser i JavaScript.
YouTube Video
Beste praksis for betingelsesuttalelser i JavaScript
if-uttalelser er en grunnleggende kontrollstruktur i JavaScript-programmer. Imidlertid, når koden blir mer kompleks, kan antallet if-uttalelser øke, noe som gjør koden vanskeligere å lese. Denne gangen vil vi dykke ned i beste praksis for å utforme if-uttalelser riktig i JavaScript for å forbedre lesbarheten og vedlikeholdbarheten.
Forenkle koden ved hjelp av flagg.
Forenkle betingelser som involverer flere kriterier ved å bruke boolske verdier.
Eksempler å unngå
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Forbedrede eksempler
Bruk flagg for å tydeliggjøre betingelser.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Hold betingelsesuttalelser enkle
Når et betinget uttrykk blir komplisert, reduseres kodelesbarheten, så det er nødvendig å holde betingelsen enkel.
Eksempler å unngå
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Forbedrede eksempler
Ved å bryte ned betingelsen i variabler med spesifikke betydninger kan du tydeliggjøre hensikten.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Avklar rekkefølgen til logiske operatorer
I JavaScript if-setninger kan misforståelser av rekkefølgen til logiske operatorer føre til uventet oppførsel.
Eksempler å unngå
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}Forbedrede eksempler
Når rekkefølgen til operatorer er uklar, kan du bruke parenteser på riktig måte for å avklare.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Bruke kortslutningsevaluering
JavaScript støtter kortslutningsevaluering for både && (OG) og || (ELLER) operatorene. Kortslutningsevaluering betyr at når resultatet av en betingelse bestemmes under evaluering, blir den gjenværende delen ikke evaluert.
OG(&&): Hvis venstre side evalueres som falsk, evalueres ikke høyre side, og dens verdi returneres.ELLER(||): Hvis venstre side evalueres som sann, evalueres ikke høyre side, og dens verdi returneres.
Eksempler å unngå
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Forbedrede eksempler
I denne koden kalles funksjonen user?.someComplexFunction() selv om user?.isLoggedIn er false.
Å forstå kortslutningsevaluering kan hjelpe deg å unngå unødvendige beregninger og skrive effektiv kode.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimer bruken av else-uttalelser
else-uttalelser kan øke den kognitive belastningen når du sporer koden. I stedet bør du vurdere å bruke tidlige returuttalelser.
Eksempler å unngå
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Forbedrede eksempler
Tydeliggjør betingelser med tidlige returuttalelser.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Riktig bruk av den ternære operatoren
For enkle betingelser kan bruk av en ternær operatør forkorte koden din. Unngå imidlertid nesting eller kompleks logikk.
Eksempler å unngå
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Forbedrede eksempler
Prioriter lesbarhet ved å dele opp betingelser.
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}Bruke standardverdier og kortslutningsevaluering
Bruk standardverdier og kortslutningsevaluering for å redusere forgreninger og forenkle koden.
Eksempler å unngå
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Forbedrede eksempler
I dette tilfellet gjør bruk av logiske operatorer det mer konsist.
1// Good Example
2displayName = user?.name || 'Guest';Skill riktig mellom når du skal bruke switch-instruksjoner.
Når flere betingelser er nødvendige, kan switch-instruksjoner gjøre intensjonene tydeligere.
Eksempler å unngå
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}Forbedrede eksempler
Bruk av switch-instruksjoner kan bidra til å organisere kode.
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}Bruke vaktklausuler med tidlige avslutningsbetingelser
En vaktklause er en teknikk som bruker if-setninger for å avslutte en funksjon tidlig.
Eksempler å unngå
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}Forbedrede eksempler
Bruk vaktklause for å redusere nesting.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Skriv kommentarer for å tydeliggjøre intensjoner.
For komplekse betingelser eller kritiske grener, legg til kortfattede og tydelige kommentarer for å formidle kodens hensikt.
Eksempler å unngå
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Forbedrede eksempler
Legg til kommentarer for å tydeliggjøre intensjoner.
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}Konklusjon
Effektiv bruk av JavaScripts if-setninger kan i stor grad forbedre kodens lesbarhet og vedlikeholdbarhet.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.