5 פיצ'רים שישכנעו אתכם להתחיל לכתוב בES6

כולם מדברים על זה, כולם עושים את זה, אמנם לא כל הדפדפנים תומכים והתקן לא לגמרי סגור אבל חייבים להתחיל. למי שמפתח בג'אווה סקריפט ועדיין לא כותב בES5/6 (קיצור לEcmaScript) להלן 5 סיבות למה כדאי להתחיל להשתמש בתקן החדש לשפה.

1. פונקציות חץ Arrow Functions

כמה פעמים כתבתם קוד כזה:

var that = this;

myService.doSomething(x, function(res){
 console.log(res);
that.val = res;
});

שני דברים מטרידים: הכתיבה המסורבלת עם המילה function (נסו להזכר בכל הפונקציות האנונימיות המקוננות…) והקטע הבלתי נסבל הזה בJS שבו הthis מצביע לסקופ של הפונקציה במקום ל"אובייקט" ועל מנת לפתור זאת צריך לשמור רפרנס לאובייקט או להשתמש בbind.

בES6 הפתרון פשוט:

myService.doSomething(x, (res)=>{
 console.log(res);
this.val = res;
});

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

2. איטרטורים

כן, סוף סוף JS נכנסת לסטנדרט של המילניום. יש! לא עוד לולאות for מסורבלות עם אינדקסים ומשתנים שמטיילים על מערכים. מעכשיו זה נראה כך:

myArray.forEach(function (value) {
    console.log(value);
});

ובשרשור עם פונקציית חץ מהסעיף הקודם מקבלים את הקוד האלגנטי הבא:

myArray.forEach((value)=> { console.log(value); });

3. הגדרת משתנים לוקאליים לscope

בג'אווה סקריפט למי שטרם שם לב ברגע שמגדירים משתנה עם var הוא יהיה תקף עבור כל הבלוק של הפונקציה הקרובה. זה בניגוד למצופה הרבה פעמים. למשל:

for (var i=0; i<10; i++){
// do something
}

// will print 10
console.log(i);

דבר זה יכול לגרום לבלבול והתנגשות שמות משתנים כיוון שמשתנים שמוגדרים בבלוק מצומצם חיים למעשה בבלוק הרבה יותר נרחב ועלולים להתנגש עם משתנים אחרים. בES6 ניתן להגדיר משתנה באמצעות let (במקום var) שמשמעותו הוא שהמשתנה מוגדר רק לבלוק הקרוב ביותר ולא לפונקציה.

for (let i=0; i<10; i++){
// do something
}

// exception: i is not defined
console.log(i);

4. משתני const

אתם מתכנתים? יפה, אז לא צריך להסביר מה זה const ולמה צריך את זה. בכל זאת הנה דוגמא ופרס למי שינחש מה היא מדפיסה

const x = 10;
console.log(x);

5. וגולת הכותרת למי שרגיל לשפות OOP: קלאסים!

ES6 מציגה את הclass. לא מדובר חלילה במהפכה בשפה, עדיי JS נשארת prototype based וכמובן weakly typed אבל זה מאפשר כתיבת סינטקס נוחה וקריאה למי שרגיל לחשוב באופן של קלאסים, אובייקטים, מתודות, ירושה וכו':

class Fish {
    constructor () {
        this.weight = 4;
        this.color = 'blue';
    }

    eat (kg) {
        this.weight += kg;
    }

    swim (km) {
        this.weight -= km*0.1;
    }
}

var fish = new Fish();
fish.eat(3);
fish.swim(2);
console.log(fish.weight);

הרעיון פשוט: הconstructor מתרגם לגוף הפונקציה למקרה שהיינו כותבים פונקציית-קלאס JS רגילה. המתודות הופכות למעשה לפונקציות prototype והthis מצביע לגוף של הפונקציה הראשית כשם שהיה קורה בפונקציית prototype רגילה. אז למעשה זה JS רגיל לגמרי רק עם סינטקס OOP נוח ומוכר. וכן, יש גם static למי ששואל 🙂