הצהרת פונקציה ב-JavaScript: תחביר, Hoisting ו-return

פונקציה היא רצף צעדים עם שם

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

function greet(name) {
    return "Hello, " + name;
}

console.log(greet("Ada"));
console.log(greet("Boris"));

בואו נפרק את זה:

• function היא מילת המפתח שפותחת הצהרה.
• greet הוא שם הפונקציה.
• (name) היא רשימת הפרמטרים: הקלטים שהפונקציה מקבלת.
• הבלוק שבתוך הסוגריים המסולסלים הוא גוף הפונקציה.
• greet("Ada") היא קריאה. JavaScript מריצה את הגוף כש-name מקושר ל-"Ada".

הגדרת פונקציה לא מריצה אותה. הקריאה לה היא שמריצה אותה.

פרמטרים וארגומנטים

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

function power(base, exponent) {
    return base ** exponent;
}

console.log(power(2, 10));
console.log(power(5, 3));

כאן base ו-exponent הם פרמטרים. 2 ו-10 הם ארגומנטים. JavaScript מקשרת אותם לפי הסדר: הארגומנט הראשון לפרמטר הראשון, וכן הלאה.

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

return מחזירה ערך

console.log כותבת לפלט. return מחזירה ערך למי שקרא לפונקציה, כדי שיוכל להשתמש בו:

function power(base, exponent) {
    return base ** exponent;
}

const result = power(2, 10);
console.log(result + 1);

בלי return, פונקציה מחזירה undefined:

function greet(name) {
    console.log("שלום, " + name);
}

const value = greet("Ada");
console.log("הוחזר:", value);

return גם יוצאת מהפונקציה מיד. החזרה מוקדמת היא הדרך המקובלת לטפל במקרי קצה לפני הלוגיקה הראשית:

function discount(price, percent) {
    if (percent < 0 || percent > 100) {
        return null;
    }
    return price * (1 - percent / 100);
}

console.log(discount(50, 20));
console.log(discount(50, 150));

החזרות מוקדמות מונעות מהגוף הראשי להפוך לפירמידה של if/else.

Hoisting: אפשר לקרוא לפונקציה לפני שהגדרתם אותה

הנה משהו שבאמת מפתיע אנשים שמגיעים משפות אחרות. הצהרות פונקציה עוברות hoisting: JavaScript מעבירה אותן לראש ה-scope שלהן לפני שהיא מריצה קוד כלשהו. כלומר, אפשר לקרוא לפונקציה בשורה שנמצאת מעל המקום שבו הוצהרה:

console.log(square(5));

function square(n) {
    return n * n;
}

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

זה הבדל התנהגותי אמיתי בין הצהרות פונקציה לדרכים האחרות ליצור פונקציה (ביטויי פונקציה, arrow functions). אלה עוברים hoisting כמו משתנים: ה_שם_ ידוע, אבל הערך לא מוצב עד שהשורה רצה. עוד על ההבחנה הזאת בחלק הבא.

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

הצהרות מול ביטויים

הצהרת פונקציה עומדת בפני עצמה כפקודה. ביטוי פונקציה מופיע במקום שבו מצופה ערך, לרוב בצד הימני של השמה:

// Declaration - hoisted.
function add(a, b) {
    return a + b;
}

// Expression - assigned to a variable.
const multiply = function (a, b) {
    return a * b;
};

console.log(add(2, 3));
console.log(multiply(2, 3));

שתיהן מייצרות פונקציות שאפשר לקרוא להן. ההבדלים:

• הצהרות עוברות hoisting במלואן. ביטויים פועלים לפי כללי ה-hoisting של המשתנה שאליו הם מוצבים (const ו-let נמצאים ב-temporal dead zone עד שהשורה רצה).
• להצהרות חייב להיות שם. ביטויים יכולים להיות אנונימיים, אם כי מתן שם עוזר ב-stack traces.
• הצהרות לא יכולות להופיע בכל מקום. ב-strict mode, function foo() {} בתוך בלוק if מתנהגת באופן לא עקבי בין מנועים שונים, אז השתמשו שם בביטוי.

לרוב פונקציות העזר ברמה העליונה של קובץ, הצהרה נקראת טוב. לפונקציות שמועברות כארגומנטים או מוצבות במאפיינים, ביטוי (או arrow function) הוא הבחירה הרגילה.

שמות וסגנון

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

// Hard to follow:
function p(x, y) {
    return x * (1 + y);
}

// Easy to follow:
function priceWithTax(price, taxRate) {
    return price * (1 + taxRate);
}

console.log(priceWithTax(1200, 0.08));

כמה מוסכמות ששווה לאמץ:

• שמות של פונקציות צריכים להיות פעלים: fetchProfile, computeTotal, sendEmail.
• השתמשו ב-camelCase, זו הנורמה ב-JavaScript.
• פונקציות שמחזירות בוליאני מתחילות לרוב ב-is, has או can: isValid, hasAccess, canEdit.

המטרה היא שמקום הקריאה ייקרא כמו משפט.

דוגמה קטנה שעובדת

מחברים את החלקים: פרמטרים, החזרה מוקדמת ושם תיאורי:

function formatAddress(street, city, country, zip) {
    if (!street || !city) {
        return null;
    }
    const parts = [street, city];
    if (zip) parts.push(zip);
    parts.push(country || "US");
    return parts.join(", ");
}

console.log(formatAddress("1 Main St", "Boston"));
console.log(formatAddress("1 Main St", "Boston", "US", "02108"));
console.log(formatAddress("Place Vendôme 1", "Paris", "France"));

הצהרה אחת, תנאי שמירה אחד, החזרה ברורה. הצורה הזאת מכסה את רוב הפונקציות שתכתבו.

הבא בתור: Arrow Functions

הצהרות הן סוס העבודה, אבל JavaScript מודרנית נשענת מאוד על תחביר קצר יותר, arrow functions, במיוחד עבור callbacks ושורות בודדות. הן נראות אחרת, מתנהגות אחרת ביחס ל-this, והן הנושא של העמוד הבא.