Pinakamahusay na Kasanayan para sa Conditional Statements sa JavaScript
Ipinaliwanag ng artikulong ito ang pinakamahusay na kasanayan para sa conditional statements sa JavaScript.
YouTube Video
Pinakamahusay na Kasanayan para sa Conditional Statements sa JavaScript
Ang mga if statements ay isang pangunahing istruktura ng kontrol sa mga programang JavaScript. Gayunpaman, habang nagiging mas kumplikado ang code, maaaring dumami ang bilang ng mga if statements, na nagpapahirap basahin ang code. Sa pagkakataong ito, susuriin natin ang pinakamahusay na kasanayan para maayos na magdisenyo ng if statements sa JavaScript upang mapabuti ang readability at maintainability nito.
Pagandahin ang code gamit ang mga flag
Pagaanin ang mga kondisyon na may kinalaman sa iba't ibang kriteriya gamit ang boolean values.
Mga Halimbawang Dapat Iwasan
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Pinahusay na mga Halimbawa
Gamitin ang mga flag upang gawing mas malinaw ang mga kondisyon.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Panatilihing Simple ang Conditional Statements
Kapag naging kumplikado ang isang conditional na ekspresyon, bumababa ang kakayahang mabasa ng code, kaya kinakailangang panatilihing simple ang kondisyon.
Mga Halimbawang Dapat Iwasan
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Pinahusay na mga Halimbawa
Sa pamamagitan ng paghahati ng kondisyon sa mga variable na may partikular na mga kahulugan, maaari mong linawin ang layunin nito.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Linawin ang prayoridad ng mga logical operator
Sa mga pahayag na if sa JavaScript, ang maling pagkaintindi sa prayoridad ng mga logical operator ay maaaring magdulot ng hindi inaasahang kilos.
Mga Halimbawang Dapat Iwasan
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}Pinahusay na mga Halimbawa
Kapag hindi malinaw ang prayoridad ng mga operator, maaari mong gamitin ang mga panaklong nang naaangkop upang linawin ito.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Paggamit ng short-circuit na pagsusuri
Sinusuportahan ng JavaScript ang short-circuit evaluation para sa parehong && (AND) at || (OR) operators. Ang short-circuit evaluation ay nangangahulugan na kapag natukoy ang resulta ng isang kondisyon habang sinusuri, ang natitira ay hindi na sinusuri.
AND(&&): Kapag ang kaliwa ay na-evaluate bilang false, ang kanan ay hindi na sinusuri at ang halaga nito ang ibinabalik.OR(||): Kapag ang kaliwa ay na-evaluate bilang true, ang kanan ay hindi na sinusuri at ang halaga nito ang ibinabalik.
Mga Halimbawang Dapat Iwasan
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Pinahusay na mga Halimbawa
Sa code na ito, tinatawag ang user?.someComplexFunction() function kahit na ang user?.isLoggedIn ay false.
Ang pag-unawa sa short-circuit evaluation ay maaaring makatulong na maiwasan ang hindi kinakailangang computations at makapagsulat ng mas episyenteng code.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Bawasan ang Paggamit ng mga else Statements
Ang mga else statements ay maaaring magdagdag ng kognitibong bigat kapag sinusubaybayan ang code. Sa halip, isaalang-alang ang paggamit ng early returns.
Mga Halimbawang Dapat Iwasan
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Pinahusay na mga Halimbawa
Linawin ang mga kondisyon gamit ang early returns.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Tamang Paggamit ng Ternary Operator
Para sa mga simpleng kondisyon, maaaring paikliin ng paggamit ng ternary operator ang iyong code. Gayunpaman, iwasan ang paglalagay ng nested na lohika o kumplikadong mga lohika.
Mga Halimbawang Dapat Iwasan
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Pinahusay na mga Halimbawa
Bigyang prioridad ang pagiging madaling mabasa sa pamamagitan ng paghahati ng mga kondisyon.
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}Paggamit ng mga default na halaga at short-circuit na pagsusuri
Gamitin ang mga default na halaga at short-circuit na pagsusuri upang mabawasan ang branching at mapadali ang code.
Mga Halimbawang Dapat Iwasan
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Pinahusay na mga Halimbawa
Sa kasong ito, mas naiiklian ito sa pamamagitan ng paggamit ng mga logical operator.
1// Good Example
2displayName = user?.name || 'Guest';Tamang paghiwalayin kung kailan gagamitin ang switch statements
Kapag kinakailangan ng maraming kondisyon, maaaring gawing mas malinaw ng switch statements ang layunin.
Mga Halimbawang Dapat Iwasan
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}Pinahusay na mga Halimbawa
Ang paggamit ng switch statements ay maaaring makatulong sa pag-aayos ng 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}Paggamit ng mga guard clause na may maagang exit na kondisyon
Ang guard clause ay isang tekniko na gumagamit ng if statements upang maaga nang lumabas sa isang function.
Mga Halimbawang Dapat Iwasan
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}Pinahusay na mga Halimbawa
Gamitin ang guard clauses upang mabawasan ang nesting.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Sumulat ng mga komento upang ipaliwanag ang mga layunin
Para sa mga kumplikadong kondisyon o mahahalagang sangay, magdagdag ng maikli at malinaw na mga komento upang maipahayag ang layunin ng code.
Mga Halimbawang Dapat Iwasan
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Pinahusay na mga Halimbawa
Magdagdag ng mga komento upang gawing malinaw ang mga layunin.
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}Konklusyon
Ang epektibong paggamit ng JavaScript if statements ay maaaring lubos na mapabuti ang pagiging mabasa at maayos ng code.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.