switch ב-JS ועוד מטעמים

הפעם כמה קישורים שהמשותף ביניהם הוא שהם עוסקים ב-JavaScript.

המאמר הראשון מדבר על אלטרנטיבה ל-if ו-switch, ע”י שימוש בטבלת פוינטרים המיושמת ע”י אובייקט. זה חמוד ופשוט, ונראה שזה יכול להתאים גם לשפות אחרות.

הקישור השני אינו מאמר, אלא ספר: Programming JavaScript Applications. הספר הוא חינמי ברשת, ונראה שהוא הן יסודי והן מעניין. לי אישית לא היה זמן להתעמק בו, אבל אחת הסיבות שאני מביאה אותו פה היא כדי לחזור אליו בע”ה ביום מן הימים.

הקישור השלישי הוא 45 טיפים וטריקים ב-JS. יש בו הן דברים קטנים (כמו ההמלצה להשתמש ב-=== ולא ב-==) והן גדולים (איך לקבל סדרה רנדומלית של תוים אלפאנומריים). כדאי לקרוא גם את התגובות מפני שיש שם עוד הערות ותובנות, הן לגבי ההמלצות במאמר, והן נוספות עליו.

הקישור הרביעי דומה לשלישי, רק שהוא מדבר על jQuery. מתברר שמישהו ישב וקרא את הקוד של jQuery, והפיק ממנו 18 תובנות. בהתחלה התובנות נראו לי די משעממות, אבל אז ראיתי דברים כמו “אפשר להעביר ל-addClass ול-removeClass פונקציה כפרמטר” (מתאים כשיש תנאים שונים ל-class-ים שונים); או שבנוסף ל-typeof הרגיל של JS, יש ל-jQuery פונקציית type() שהיא יותר משוכללת. אז כדאי לקרוא, יש עוד הפתעות!

כולנו ודאי מכירים את הפונקציות הרצות על Array, כגון foreach ו- map. הקישור החמישי הוא לאיש אחד שהחליט שהביצועים של הפונקציות הללו אינם טובים מספיק, והחליט ליישמן בעצמו. הוא יצר ספריה בשם PowerArray עם יישום מאוד פשוט ויעיל של הפונקציות הנ”ל, והוסיף להן עוד פונקציות כגון binarySearch, numericSort ו-addhAndSort.

בקישור הששי, נגיע לאתר שאני נתקלת בו מדי פעם, You Don’t Need jQuery. בקישור הספציפי הזה מדובר על הצמדת event-ים לאלמנטים. בעיניי, הצמדת event-ים היא אחת הסיבות להשתמש ב-jQuery, בגלל הסרבול בהתייחסות לסוגי דפדפנים שונים. אז כיף שיש מקום אחד שבו יש קוד מסודר לפעולה הזאת.

הקישור האחרון קשור למשהו שהתנסיתי והסתבכתי איתו בעצמי: השימוש ב-label ב-JavaScript. כידוע, label הוא בד”כ הגדרה של מקום בתוכנית, שאליו אפשר לקפוץ ממקום אחר, בד”כ באמצעות פקודת goto. אמנם כולנו יודעים ששימוש ב-goto הוא ממש לא מומלץ, אבל היה לנו עניין בעבודה לפחות להכיר את השימוש בזה.
בהתחלה ניסינו להשתמש ב-label כמו שמשתמשים בשפות תכנות אחרות: אחרי לולאה מקוננת, כותבים מילה כלשהי ואחריה נקודתיים (וכך בעצם יצרנו label), ואז פקודה שתרוץ כשמגיעים ל-label הזה. בתוך הלולאה הפנימית ביותר יצרנו תנאי שבהתקיימו קופצים ל-label האמור.
א-ב-ל, קיבלנו שגיאה: ה-label לא ידוע.

for ( var i = 1; i <= 10; i++ )
{
    for ( var j = 1; j <= 10; j++ )
    {
        for ( var k = 1; k <= 10; k++ )
        {
            if ( i * j * k === 100 )
                break after;
            document.write( i * j * k );
            document.write( "<br/>" );
        }
    }
}
after:
        document.write( "Done!" );

מוזר מאוד. איך לא ידוע, והרי הגדרנו אותו? התחלנו להזיז את ה-label, לנסות להגדיר אותו לפני הלולאה. הפלא ופלא – ה-label פתאום ידוע. אז כבר אין שגיאה, אבל עדיין לא קורה שומדבר.
יצאנו לחפש עזרה, ומצאנו את המאמר כאן. מתברר שב-JavaScript, ה-label אינו מגדיר את המקום אליו יש לקפוץ, אלא את המקום ממנו רוצים לצאת. כלומר, אם יש לי לולאות מקוננות, אני מגדירה את ה-label לפני הלולאה החיצונית, ואילו אחרי הלולאה, אני כותבת פקודות שצריכות להתבצע אחרי היציאה מהלולאה. בתוך הלולאה אני כותבת break ואת שם ה-label, וזה בעצם מבצע יציאה מקטע הקוד שה-label הגדיר.
לא ברור למה JS חייב להתנהג אחרת מהקונבנציה הנהוגה בשפות אחרות, אבל ככה זה, וכדאי לדעת.

after:
        
for ( var i = 1; i <= 10; i++ )
{
    for ( var j = 1; j <= 10; j++ )
    {
        for ( var k = 1; k <= 10; k++ )
        {
            if ( i * j * k === 100 )
                break after;
            document.write( i * j * k );
            document.write( "<br/>" );
        }
    }
}

document.write( "Done!" );

נשארתם עם טעם של עוד? הניוזלטר Web Tools Weekly תמיד פותח בהכרה של פונקציית JavaScript פחות מוכרת, אך יעילה. יש דוגמה קצרה, הסבר קצר, וקישור ל-JsFilddle. זה פתיח נחמד לניוזלטר, ומי שזה מוצא חן בעיני יכול לעשות מנוי, או לקרוא את הגליונות הקודמים.

תוספת 2015/04/01: Airbnb פרסמו את ה-styleguide שלהם. הוא מכיל כלל עשה ואל תעשה, מנומקים ומוסברים. ממש תענוג לקרוא (ואולי גם ליישם 🙂 )

תוספת 2015/06/16: מאמר קצר ופשוט על bind ב-JS.

תוספת 2015/09/09: JavaScript בתמונה אחת.

עדכון 2015/09/18: שיטות שונות לאתחול משתנים ב-JS.