הכירו את 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

בקצרה – פונקציות מסוג Arrow Functions לא "יורשות" את ה-this של האובייקט שבו את נמצאות.
על מנת להסביר את השימוש ב-this ב-Arrow Functions, ניקח את הדוגמה הבאה:

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

counter.countFunc();

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

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

counter.countFunc();

Arrow Function עושה את החיים קלים יותר במקרה זה, היא מאפשרת לנו להשתמש ב-this ישירות בתוך הפונקציה, ללא כל השמה:

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

counter.countFunc();

אך יש לשים לב, העיקרון הנ"ל יכול גם להוות חיסרון, במידה ואנחנו כן רוצים ש-this יהיה זמין עבורנו במתודה.

למה עוד צריך לשים לב כאשר רוצים להשתמש ב-Arrow Functions?

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

בהצלחה!

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

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)