פונקציות ב-JavaScript

מאמר זה מסביר על פונקציות ב-JavaScript.

YouTube Video

פונקציות ב-JavaScript

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

דרכים להגדיר פונקציות

הצהרת פונקציה

ניתן להגדיר פונקציות באמצעות מילת המפתח function. הצהרות פונקציה עוברות hoisted (הרמה) לפני שהקוד רץ ולכן ניתן לקרוא להן לפני שהן מוגדרות.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

בדוגמה זו, מאחר שהפונקציה greet נקראת לפני הגדרתה, יוצגו Hello, Everyone ו-Hello, Alice.

ביטוי פונקציה

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

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

בדוגמה זו, יוצג Hello, Bob.

פונקציית חץ

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

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

בדוגמה זו ניתן להצהיר על פונקציות כ-greet ו-greetShort. אם הפונקציה מכילה שורה אחת בלבד, ניתן להשמיט את ה-{} (סוגריים מסולסלים) כמו ב-greetShort.

אלמנטים של פונקציה

פרמטרים

ערכים המועברים לפונקציה נקראים פרמטרים. על ידי ציון פרמטרים בעת הגדרת פונקציה, ניתן להעביר ערכים בעת הקריאה לפונקציה.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

ארגומנטים ברירת מחדל

ניתן לציין ערך ברירת מחדל אם לא מועבר ערך לארגומנטים.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

בדוגמה הזו, אם greet() נקרא, ערך ברירת המחדל Guest ישמש.

ערך החזרה

ניתן להחזיר ערך החזרה מפונקציה באמצעות הפקודה return. אם אין פקודת return, הפונקציה תחזיר undefined.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

בדוגמה הזו, כיוון ש-greet לא מחזירה ערך, ערך ההחזרה הוא undefined.

פונקציה אנונימית

פונקציה ללא שם נקראת פונקציה אנונימית. פונקציות אלו משמשות לעיתים קרובות כהבעות פונקציה או כפונקציות חץ.

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

ביטוי פונקציה המופעל מיידית (IIFE)

ביטוי פונקציה המופעל מיידית (IIFE) הוא פונקציה שמבוצעת ברגע שהיא מוגדרת. לעיתים קרובות משתמשים בו לשליטה בטווח ההשפעה (scope).

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

הפונקציה מבוצעת מייד עם הכרזתה.

פונקציית חזרה (Callback)

העברת פונקציה כארגומנט לפונקציה אחרת לצורך ביצוע מאוחר יותר נקראת פונקציית חזרה (Callback). היא משמשת לעיתים קרובות בתהליכים אסינכרוניים ובטיפול באירועים.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

בדוגמה הזו, פונקציה שמפיקה ערך ל-console מועברת כפונקציית חזרה.

פונקציה רקורסיבית

קריאה לפונקציה על עצמה נקראת רקורסיה, והפונקציה שמבצעת עיבוד חוזר באמצעותה נקראת פונקציה רקורסיבית. לדוגמה, פונקציה לחישוב עצרת (factorial) יכולה להיות מיושמת בעזרת רקורסיה באופן הבא.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

בדוגמה זו, הפקטוריאל של 5, שהוא 120, יוצג.

מילת המפתח this

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

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

greet של המשתנה obj מוגדר באמצעות מילת המפתח function. לכן, מילת המפתח this מתייחסת לאובייקט של המשתנה obj. מצד שני, greet של המשתנה obj2 מוגדר באמצעות פונקציית חץ. לכן, מילת המפתח this מתייחסת לאובייקט בטווח החיצוני והיא undefined בדוגמה זו.

טווח פונקציות וסגירות

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

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

בדוגמה זו, הפונקציה inner יכולה לגשת למשתנה outerVar כי היא שומרת על הטווח שבו הוגדרה.

סיכום

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

פונקציות הן אחד המושגים החשובים ב-JavaScript, המנצלות את המבנה הגמיש שלה.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video