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

1. שמוש ב arguments כמו במערך

שורת JavaScript ראשונה שכבר ממש לא אתגעגע אליה (לקוח מהבלוג של דייויד וולש):

function myFn(/* any number of arguments */) {
    var args = Array.prototype.slice.call(arguments);

    args.forEach(function(arg) {
        // do something with args here
    });
}

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

function sum(...args) { 
    return args.reduce((a,b) => a+b) ;
}

// or in its even shorter form using a fat arrow:
var sum = (...args) => args.reduce((a,b) => a+b);

ואם זה לא היה מספיק בשבילכם תמיד אפשר להשתמש ב Array.from:

function myFn(/* any number of arguments */) {
    var args = Array.from(arguments);

    args.forEach(function(arg) {
        // do something with args here
    });
}

 

2. הגדרת Prototype במקום הלא נכון בירושה

נסו למצוא את השגיאה בקוד הבא:

function MySpecialList() {
    NormalList.call(this, arguments);
}

MySpecialList.prototype.doThis = function() {
    // do this thing
};

MySpecialList.prototype.doThat = function() {
    // do that
};

MySpecialList.prototype = Object.create(NormalList.prototype);

טוב זה ברור נכון? השורה האחרונה דורסת את שתי הפונקציות שכבר הגדרנו כך שהרשימה המיוחדת לא כוללת יותר את שתי הפונקציות. ב ES6 זה כבר לא יכול לקרות:

class MySpecialList extends NormalList {
    doThis() {
        // do this thing
    }

    doThat() {
        // do that
    }
}

3. טעויות בתחום הגדרה

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

var btns = document.querySelectorAll('button');

for ( var i=0; i < btns.length; i++ ) {
    btns[i].addEventListener('click', function() { alert(i); });
}

מרגע שעוברים לעבוד עם let תחומי הגדרה חוזרים לעבוד כמו בשאר העולם. הקוד הבא ב ES6 כבר עובד מעולה וכל כפתור מדפיס את המספר הסידורי הבא:

var btns = document.querySelectorAll('button');

for ( let i=0; i < btns.length; i++ ) {
    btns[i].addEventListener('click', function() { alert(i); });
}

4. קשירה אוטומטית של this בפונקציות חץ

עוד פעם הפעלתם פונקציית טיפול באירוע וגיליתם שמשתנה this התקלקל כי שכחתם bind? החץ השמן של ES6 כבר דואג ל bind באופן אוטומטי, למרות שאני לא בטוח שהקוד יוצא קצר יותר. כך זה נראה: