שיטות עבודה מומלצות להצהרות תנאי ב-JavaScript

שיטות עבודה מומלצות להצהרות תנאי ב-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 בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video