הכירו את Arrow Functions

Arrow Functions הוא אחד מהחידושים האהובים ביותר ב-ES6 (שכבר די ותיק) שבהחלט כדאי להכיר.
שנצא לדרך?

חסכו קוד מיותר…

ישנם 2 יתרונות עיקריים בכתיבת Arrow Functions על פני פונקציות רגילות. אחד מהם, הוא ש-Arrow Functions הן פונקציות שקל ומהיר יותר לכתוב, בואו נראה כמה דוגמאות.

ניקח פונקציית חיבור פשוטה מאוד ב-JavaScript:

var sum = function(num1, num2) {
    return num1 + num2;
}

את הפונקציה הפשוטה הזו יכולנו להפוך לפשוטה יותר על ידי כתיבת Arrow Function באופן הבא:

var sum = (num1, num2) => {
    return num1 + num2;
}

כלומר וויתרנו על המילה function והוספנו את הסימן המזהה של Arrow Functions שהוא <=. מאחר והפונקציה מבצעת פעולה אחת (חיבור 2 הארגומנטים), יכלנו גם להפוך את הכל לשורה אחת בלבד ואף להוריד את המילה return, הפונקציה שלנו תדע להחזיר את הערך גם אם לא נגיד לה. כך זה נראה:

var sum = (num1, num2) => num1 + num2;

במידה והפונקציה מקבלת ארגומנט אחד בלבד, נוכל להסיר גם את הסוגריים, לדוגמה:

var names = [
    'Alex',
    'Viktoria',
    'John',
    'Ana',
];

console.log(names.map(name => name.length));

במקרים רבים, כאשר הפונקציה אינה מקבלת ארגומנטים כלל, נשתמש בסוגריים ריקות:

setInterval(() => console.log("Hi!"), 1000);

שימוש ב-this

על מנת להסביר את השימוש ב-this ב-Arrow Functions, ניקח את הדוגמה הבאה:

var counter = function() { 
    this.countTime = 5;
    var self = this;
    setInterval(function() {
        self.countTime++;
        console.log(self.countTime);
    }, 1000);
}

var counter1 = new counter();

כאשר רוצים להשתמש ב-this בתוך ה-setInterval (או פונקציית "בת" אחרת), חייב לבצע השמה של this למשתנה כלשהו לפני כן, בדוגמה הנ"ל, ביצענו את ההשמה למשתנה self.
Arrow Function עושה את החיים קלים יותר במקרה זה, היא מאפשרת לנו להשתמש ב-this ישירות בתוך הפונקציה, ללא כל השמה:

var counter = function() { 
    this.countTime = 5;
    setInterval(() => {
        this.countTime++;
        console.log(this.countTime);
    }, 1000);
}
var counter1 = new counter();

מתי להשתמש ב-Arrow Functions?

כנראה שכבר התאהבתם בArrow Functions וכבר חשבתם לשכוח מהפונקציות הרגילות אבל חשוב לדעת כי הן לא מתאימות לכל שימוש.
Arrow Functions הן פונקציות אנונימיות ולכן לא ניתן להשתמש בהן שנית.
ההמלצה היא להשתמש ב-Arrow Functions כאשר הפונקציה שלכם נועדה לבצע פעולה בודדת ופשוטה.

בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *