זה זמן רב שהקוד שאנו כותבים לא נשלח ישירות לדפדפן. אנו משתמשים בספריות איחוד וצמצום (Minification) כדי לשלב מספר קבצי קוד לקובץ אחד לצורך שיפור ביצועים. אנו משתמשים ב CSS Precompilers כדי לכתוב פחות CSS ולהגיע לקוד קל יותר לתחזוקה. אז למה בעצם אנחנו נרתעים מ ES6 ?

חדש באתר: קורס JavaScript ES6 שמסביר את כל התחביר החדש והרעיונות החדשים בכתיב JavaScript מודרני - מותאם לגירסאות ES6, ES7 ו ES8.

1. איך מפעילים את הקוד

נתחיל בהתחלה. ES6 היא הגירסא הבאה של JavaScript, ממוספרת 6. רוב היכולות של השפה עדיין לא נתמכות בדפדפנים מרכזיים, אך קיים מתרגם בשם Babel שיאפשר לכם לקחת קוד ES6 ולהמיר אותו לקוד JavaScript רגיל. קוד התוצאה לא תמיד קל לקריאה, אבל בהחלט אפשרי לקרוא אותו וגם אפשר לבקש מ Babel לייצר Source Maps, כך שבכלי הפיתוח של הדפדפן אנו נראה את הקוד המקורי שכתבנו ולא את המתורגם.

כתיבה ב ES6 מאפשרת לכתוב פחות קוד עבור אותה המשימה — ובדרך כלל הקוד שתכתבו גם יהיה קל יותר לתחזוקה. בפרט, כל קיצורי הדרך שנראה בפוסט זה פשוט לקחו מקרים שאנשים טעו בהם ב JavaScript שוב ושוב והוסיפו תחביר חדש, הרבה יותר פשוט, כדי לבצע את אותו הדבר.

אם אתם עובדים בכלי פיתוח מקומי תוכלו להתקין את החבילה Babel ולהפעיל אותו כך שכל קובץ שאתם כותבים ב ES6 יומר אוטומטית ל JS רגיל. התחילו בהתקנת הכלי באמצעות npm:

npm install -g babel

לאחר מכן עברו לתיקיית הפרויקט, ובהנחה שקבצי המקור שלכם נשמרים בתיקייה src הריצו את הפקודה:

babel -w -s src —out-dir build

הפקודה תיצור את עץ התיקיות build המקביל לעץ התיקיות src, כאשר כל קובץ ב src יתורגם באופן אוטומטי לקוד JavaScript תקני בספריית build. כך אם יש לנו את הקובץ src/intro.js אנו נטען אותו ב HTML באמצעות השורה:

<script src=“build/intro.js”></script>

היתרון בשיטת עבודה זו הוא הפשטות, אך יש לה גם חסרון. בבקרת התצורה אנו צריכים לשמור גם את תיקיית build כדי שהפרויקט יעבוד (או שנצטרך להפעיל babel בכל סביבה מחדש). כלי פיתוח רבים מאפשרים המרה אוטומטית ויעילה יותר כחלק מתהליך ה build של הפרויקט, ומומלץ להסתכל בעמוד התיעוד של Babel כדי לראות איך לשלב את ההמרה בתהליך הבנייה שלכם.

אפשרות הרצה נוספת לצרכי הדגמות בלבד היא ספריית דפדפן הממירה את הקוד בזמן טעינת העמוד. עבור דף אמיתי זה רעיון די רע, שכן איננו רוצים לעכב למשתמש את טעינת העמוד בשביל תרגומי קוד. עבור הדגמות קטנות שיטה זו מאפשרת להטמיע קוד ES6 ב Codepen ממש בקלות. 
אם תרצו לשחק עם הדוגמאות שבפוסט, פשוט לחצו על כפתור Edit on Codepen ליד כל דוגמא.

2. הגדרת מחלקות

ונעבור לקוד. בפוסט זה אציג 4 יכולות פשוטות של ES6 הפותרות בעיות אמיתיות ב JavaScript והופכות את הקוד לקריא ונקי יותר. היכולת הראשונה היא הגדרת מחלקות.
הגדרת מחלקה, ויותר מזה הגדרת מנגנון שימוש-חוזר בקוד באמצעות מחלקות זה לא עניין טריוויאלי ב JS. השימוש ב Prototypes מבלבל מתכנתים מתחילים ומנוסים כאחד, וזליגות זכרון כתוצאה משימוש לא נכון ב Closures נפוצות גם הן.

ב ES6 החיים פשוטים יותר. כך נראית מחלקה המאפשרת סכימה של מספרים ב ES6:

בדוגמא זו הבנאי לא קיבל פרמטרים. אפשר להגדיר פרמטרים בפונקציה constructor ולהעביר אותם בקריאה ל new.
גם ירושה עובדת ממש כמו שאתם חושבים. כך למשל נוכל לבנות מחלקה חדשה שתציג הודעה בכל פעם שמוסיפה ערך:

3. פונקציות חץ

יכולת שניה היא פונקציות החץ. זה כל כך פשוט שלא ברור איפה הן היו קודם. כך זה נראה:

אפשר להשתמש בכתיב זה בכל מקום שהייתם קודם כותבים פונקציית inline. הפרמטרים בסוגריים מצד שמאל של החץ והקוד לביצוע בצד ימין. אם יש לכם יותר משורת קוד אחת בפונקציה אפשר לעטוף בסוגריים מסולסלים את הקוד לביצוע. 

בונוס נחמד של פונקציות חץ הוא שאתם מקבלים קשירה אוטומטית של המשתנה this. כך אם אתם כותבים פונקציית חץ בתוך מתודה, המשתנה this בתוך פונקציית החץ יהיה בדיוק אותו this כמו מחוץ לפונקציה (בניגוד להגדרת פונקציית inline רגילה, שם המשתנה this נקשר דינמית בעת הפעלת הפונקציה).

4. שערוך משתנים בתוך מחרוזות

עוד יכולת שהייתם מצפים שתהיה כאן הרבה זמן אך הגיעה רק עכשיו (אבל טוב מאוחר מאשר לעולם לא וכו׳) היא Template Strings. מאפשר פשוט ״לשתול״ משתנים בתוך מחרוזת, מה שחוסך שרשורי מחרוזות. בונוס מעולה הוא מחרוזות עם ירידת שורה באמצע. הנה דוגמא פשוטה:

5. הגדרת משתנה תחום לבלוק

כותב הקוד הבא היה שמח לקבל על המסך 10 כפתורים, שכל אחד מהם מדפיס טקסט אחר. לצערו זו לא התוצאה:

function makeButtons($el, count) {
  $el.html('');
  
  for ( var i=0; i < count; i++ ) {
    var $btn = $('<button>');
    $btn.html(i);
    $btn.click('click', () => alert(i) );    
    $el.append($btn);
  }
}

makeButtons($('#app'), 10);

הבעייה נובעת מכך ש i משתנה המשותף לכל פונקציות הלחיצה על הכפתורים, כלומר כל הכפתורים משתמשים באותו המשתנה i. התוצאה היא שכל הכפתורים מציגים את אותה ההודעה בלחיצה עליהם — המספר 10. זהו ערכו של i בתום הלולאה.

חידוש פשוט של ES6 הוא היכולת להגדיר משתנה ברמת הבלוק במאצעות המילה let. החליפו את המילה var ב let בשורת ה for והתוכנית מתחילה לעבוד כנדרש:

6. סיכום וקריאת המשך

הגירסא הבאה של JavaScript הולכת לעשות את העבודה של כולנו הרבה יותר קלה ולחזק את הדמיון בין JavaScript לשפות מונחות עצמים שאנו מכירים. זה אומר הרבה פחות באגים מוזרים כתוצאה מחוסר הבנה מעמיקה של מאפייני השפה. 

בזכות הממיר Babel השימוש ב ES6 כבר היום הוא מאוד פשוט. מפתחים רבים שממילא מפעילים תהליך build לא ירגישו כלל את התוספת של ההמרה ל ES6. השימוש ב Source Maps מאפשר לנו להסתכל על הקוד המקורי (בגירסת ה ES6 שלו) גם בתוך כלי הפיתוח של הדפדפן ולהוסיף נקודות עצירה לפי שורות בקוד המקורי.

אפשר למצוא רשימה מלאה של יכולות חדשות ב ES6 עם דוגמאות בקישור:
https://github.com/lukehoban/es6features

ואת Babel בעמוד הבית של הפרויקט בקישור:
http://babeljs.io/

מתעניינים מתי אפשר יהיה להשתמש ביכולות אלו בדפדפנים (ללא תרגום Babel)? בקישור הבא תמצאו טבלת תאימות עדכנית:
https://kangax.github.io/compat-table/es6/