פרק 9: פונקציות (Functions) ב-JavaScript

1. מהי פונקציה?

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

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

2. הגדרת פונקציה

הגדרת פונקציה ב-JavaScript נעשית באמצעות מילת המפתח function, שם הפונקציה, ותחום הפעולה שלה בסוגריים מסולסלים {}.

התחביר הבסיסי:

function functionName(פרמטרים) {
    // קוד שיבוצע כאשר הפונקציה מופעלת
}

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

function greet() {
    console.log("Hello, world!");
}

הסבר:

• כאן יצרנו פונקציה בשם greet שלא מקבלת פרמטרים.
• כאשר נריץ את הפונקציה, היא תדפיס את ההודעה "Hello, world!".

הפעלת פונקציה:

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

greet(); // יפעיל את הפונקציה ויציג "Hello, world!"

3. פונקציות עם פרמטרים

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

דוגמה לפונקציה עם פרמטרים:

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("Alice"); // מציג "Hello, Alice!"
greet("Bob");   // מציג "Hello, Bob!"

הסבר:

• הפונקציה greet מקבלת פרמטר בשם name ומשלבת אותו בתוך ההודעה.
• כשאנחנו קוראים לפונקציה עם ערך כמו "Alice", הפלט יהיה "Hello, Alice!".
• כשאנחנו קוראים לפונקציה עם "Bob", הפלט יהיה "Hello, Bob!".

4. פונקציות שמחזירות ערך

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

דוגמה לפונקציה שמחזירה ערך:

function add(a, b) {
    return a + b;
}

let sum = add(5, 3);
console.log(sum); // מציג 8

הסבר:

• הפונקציה add מקבלת שני פרמטרים (a ו-b) ומחזירה את הסכום שלהם.
• כשאנחנו קוראים לפונקציה עם הערכים 5 ו-3, היא מחזירה את הסכום שלהם (8), והערך נשמר במשתנה sum.

5. פרמטרים עם ערכים ברירת מחדל

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

דוגמה:

function greet(name = "Guest") {
    console.log("Hello, " + name + "!");
}

greet();        // מציג "Hello, Guest!" (כי לא הועבר פרמטר)
greet("Alice"); // מציג "Hello, Alice!"

הסבר:

• אם לא מועבר ערך לפונקציה greet, היא תשתמש ב-"Guest" כברירת מחדל.
• אם כן מועבר ערך, היא תשתמש בערך שהועבר, כמו "Alice" בדוגמה.

6. ביטוי פונקציה (Function Expression)

בנוסף להגדרה המסורתית של פונקציה, אפשר להגדיר פונקציה בתור ביטוי ולהשאיר אותה בתוך משתנה. פונקציות אלו נקראות Function Expressions.

דוגמה לביטוי פונקציה:

let multiply = function(a, b) {
    return a * b;
};

console.log(multiply(4, 5)); // מציג 20

הסבר:

• במקום להגדיר את הפונקציה עם function, שמרנו את הפונקציה בתוך משתנה multiply.
• אפשר לקרוא לפונקציה באמצעות שם המשתנה, בדיוק כמו פונקציה רגילה.

7. פונקציות חץ (Arrow Functions)

Arrow Functions הן תחביר מקוצר לכתיבת פונקציות, שהופיע ב-ECMAScript 6. הן נותנות תחביר קצר ונוח יותר, במיוחד לפונקציות קצרות.

התחביר:

let functionName = (פרמטרים) => {
    // קוד שיבוצע
};

דוגמה:

let add = (a, b) => a + b;

console.log(add(3, 4)); // מציג 7

הסבר:

• פונקציות חץ אינן משתמשות במילת המפתח function. התחביר מקוצר בעזרת חץ (=>).
• במקרה שהפונקציה מחזירה ערך אחד ואין לה בלוק קוד מסובך, ניתן לכתוב את זה על שורה אחת ללא סוגריים מסולסלים.

8. פונקציות אנונימיות

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

דוגמה:

setTimeout(function() {
    console.log("This message is shown after 2 seconds");
}, 2000);

הסבר:

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

9. פונקציות כפרמטרים (Callbacks)

ב-JavaScript, פונקציות הן מחלקה ראשונה (First-Class Objects), כלומר, אפשר להעביר פונקציות כפרמטרים לפונקציות אחרות. פונקציות אלו נקראות Callbacks.

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

function doMath(a, b, operation) {
    return operation(a, b);
}

let sum = doMath(5, 3, function(x, y) {
    return x + y;
});

console.log(sum); // מציג 8

הסבר:

• הפונקציה doMath מקבלת שני מספרים (a, b) וגם פונקציה operation בתור פרמטר שלישי.
• כאשר קוראים לפונקציה doMath, היא מבצעת את הפונקציה שהועברה (במקרה הזה, חיבור).

10. פונקציות רקורסיביות (Recursive Functions)

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

דוגמה לחישוב עצרת (Factorial) עם פונקציה רקורסיבית:

function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}

console.log(factorial(5)); // מציג 120 (5 * 4 * 3 * 2 * 1)

הסבר:

• פונקציה זו מחשבת את העצרת (Factorial) של מספר על ידי קריאה עצמית עד שמגיעים ל-n === 0.

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

נבנה דוגמה המשלבת את כל מה שלמדנו על פונקציות. ניצור פונקציה שמחשבת הנחה על מחיר מוצר:

function calculateDiscount(price, discount = 0.1) {
    return price - (price * discount);
}

function printPrice(name, price) {
    console.log("The price of " + name + " is $" + price);
}

let originalPrice = 100;
let discountedPrice = calculateDiscount(originalPrice, 0.2);

printPrice("Laptop", discountedPrice); // מציג "The price of Laptop is $80"

הסבר:

• הפונקציה calculateDiscount מחשבת את המחיר לאחר הנחה (ברירת המחדל להנחה היא 10%).
• הפונקציה printPrice מדפיסה את המחיר של המוצר.
• קראנו לפונקציות עם ערכים קונקרטיים של מוצר ומחיר, והתוצאה היא שהמחשב מקבל הנחה של 20%.

סיכום

בפרק זה למדנו על:

1. איך להגדיר פונקציות בסיסיות ולהשתמש בהן.
2. איך להעביר פרמטרים לפונקציה ואיך פונקציות יכולות להחזיר ערך.
3. שימוש בפרמטרים עם ערכי ברירת מחדל.
4. ביטויי פונקציה ופונקציות חץ לתחביר קצר ויעיל יותר.
5. פונקציות אנונימיות ופונקציות כפרמטרים (Callbacks).
6. פונקציות רקורסיביות לפתרון בעיות מורכבות.

בפרק הבא נעמיק בנושא Pop-up Boxes ונלמד איך לעבוד עם חלונות קופצים ב-JavaScript, כמו alert, prompt, ו-confirm.