שיטות עבודה מומלצות להצהרות תנאי ב-JavaScript
מאמר זה מסביר את שיטות העבודה המומלצות להצהרות תנאי ב-JavaScript.
YouTube Video
שיטות עבודה מומלצות להצהרות תנאי ב-JavaScript
הצהרות if
הן מבנה בקרה בסיסי בתכניות JavaScript. עם זאת, ככל שהקוד הופך מורכב יותר, מספר הצהרות ה-if
עשוי לגדול, מה שהופך את הקוד לקשה יותר לקריאה. הפעם נעמיק בשיטות העבודה המומלצות לתכנון נכון של הצהרות if
ב-JavaScript כדי לשפר את הקריאות והתחזוקה.
פשט את הקוד באמצעות משתני דגל
פשט תנאים מרובי קריטריונים על ידי שימוש בערכי בוליאן.
דוגמאות שכדאי להימנע מהן
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}
דוגמאות משופרות
השתמש בדגלים כדי להבהיר תנאים.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}
שמרו על פשטות הצהרות התנאי
כאשר ביטוי מותנה הופך למורכב, קריאות הקוד יורדת, ולכן יש צורך לשמור על התנאי פשוט.
דוגמאות שכדאי להימנע מהן
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}
דוגמאות משופרות
על ידי פירוק התנאי למשתנים עם משמעויות מוגדרות, תוכלו להבהיר את הכוונה שלו.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}
הבהר את סדר הקדימות של האופרטורים הלוגיים
בפקודות if
ב-JavaScript, אי הבנת סדר הקדימות של האופרטורים הלוגיים עלולה להוביל להתנהגות לא רצויה.
דוגמאות שכדאי להימנע מהן
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}
דוגמאות משופרות
כאשר סדר הקדימות של האופרטורים אינו ברור, ניתן להשתמש בסוגריים בהתאם לצורך כדי להבהיר.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}
שימוש בהערכה מקוצרת (Short-Circuit Evaluation)
JavaScript תומכת בהערכה מקוצרת עבור אופרטורים &&
(AND) ו-||
(OR). הערכה מקוצרת פירושה שכאשר תוצאת התנאי נקבעת במהלך ההערכה, החלק הנותר אינו מוערך.
AND
(&&
): אם צד שמאל מוערך כ-False, צד ימין לא מוערך והערך שלו מוחזר.OR
(||
): אם צד שמאל מוערך כ-True, צד ימין לא מוערך והערך שלו מוחזר.
דוגמאות שכדאי להימנע מהן
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}
דוגמאות משופרות
בקוד זה, הפונקציה user?.someComplexFunction()
נקראת גם אם user?.isLoggedIn
הוא false
.
הבנת הערכה מקוצרת יכולה לעזור לכם להימנע מחישובים מיותרים ולכתוב קוד יעיל.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}
צמצמו את השימוש בהצהרות else
הצהרות else
יכולות להעלות את העומס הקוגניטיבי בעת מעקב אחר הקוד. במקום זאת, שקלו להשתמש בהחזרות מוקדמות.
דוגמאות שכדאי להימנע מהן
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}
דוגמאות משופרות
הבהירו תנאים באמצעות החזרות מוקדמות.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}
שימוש נכון באופרטור הטרנרי
עבור תנאים פשוטים, שימוש באופרטור תנאי יכול לקצר את הקוד שלך. עם זאת, יש להימנע משימוש מקונן בלוגיקה מורכבת.
דוגמאות שכדאי להימנע מהן
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';
דוגמאות משופרות
תן עדיפות לקריאות על ידי חלוקת תנאים.
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}
שימוש בערכי ברירת מחדל ובהערכה מקוצרת (Short-Circuit Evaluation)
השתמש בערכי ברירת מחדל ובהערכה קצרצרה כדי להפחית הסתעפויות ולפשט את הקוד.
דוגמאות שכדאי להימנע מהן
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}
דוגמאות משופרות
במקרה זה, שימוש באופרטורים לוגיים הופך אותו לקצר יותר.
1// Good Example
2displayName = user?.name || 'Guest';
הבחן בצורה נכונה מתי להשתמש במשפטי switch
כאשר יש צורך במספר תנאים, משפטי switch
יכולים להבהיר את הכוונות.
דוגמאות שכדאי להימנע מהן
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}
דוגמאות משופרות
שימוש במשפטי switch
יכול לעזור לארגן את הקוד.
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}
שימוש במשפטי שמירה (Guard Clauses) עם תנאי יציאה מוקדמים
משפט שמירה הוא טכניקה המשתמשת בבדיקות if
כדי לצאת מפונקציה מוקדם.
דוגמאות שכדאי להימנע מהן
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}
דוגמאות משופרות
השתמש במשפטי שמירה כדי להפחית קינון.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}
כתוב הערות כדי להבהיר כוונות
עבור תנאים מורכבים או הסתעפויות קריטיות, הוסף הערות תמציתיות וברורות כדי להעביר את כוונת הקוד.
דוגמאות שכדאי להימנע מהן
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}
דוגמאות משופרות
הוסף הערות כדי להבהיר כוונות.
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}
סיום
שימוש יעיל במשפטי if
ב-JavaScript יכול לשפר מאוד את קריאות הקוד ותחזוקתו.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.