יצירת פונקציות ב-JavaScript

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

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

הצהרות פונקציה: הדרך הפשוטה

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

פוּנקצִיָהfunctionName(פרמטרים) {
// הקוד נכנס לכאן...
לַחֲזוֹר"זוהי הצהרת פונקציה";
}

הרכיבים של בלוק הקוד לעיל כוללים:

• ה פוּנקצִיָה מילת מפתח: מילת מפתח זו מצהירה על פונקציה.
• functionName: זהו שם הפונקציה. בפועל, זה צריך להיות תיאורי ומשמעותי ככל האפשר, ולציין מה הפונקציה עושה.
• פרמטרים: זה מייצג את פרמטרי הפונקציה. פרמטרים הם רשימה אופציונלית של משתנים שאתה יכול להעביר לפונקציה כאשר אתה קורא לה.
• גוף הפונקציה: זה מכיל את הקוד שהפונקציה תפעיל כשתקרא לה. הוא מוקף בפלטה מתולתלת {} ויכול להכיל כל קוד JavaScript חוקי.
instagram viewer
• ה לַחֲזוֹר משפט: משפט זה מפסיק את הביצוע של פונקציה ומחזיר את הערך שצוין. במקרה שלמעלה, קריאה לפונקציה תחזיר את המחרוזת "זוהי הצהרת פונקציה".

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

פוּנקצִיָההוסףThreeNumbers(א ב ג) {
לַחֲזוֹר a + b + c;
}

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

לדוגמה:

addThreeNumbers(1, 2, 3) // 6

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

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

לדוגמה:

isHoisted(); // הפונקציה מורמת
פוּנקצִיָההוא מורם() {
לְנַחֵם.עֵץ("הפונקציה מונפת");
לַחֲזוֹרנָכוֹן;
}

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

ביטויי פונקציה: מתפקדים כערכים

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

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

להלן התחביר לביטוי פונקציה:

const functionName = פוּנקצִיָה () {
לַחֲזוֹר"ביטוי פונקציה";
};

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

לדוגמה:

functionName(); // ביטוי פונקציה

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

לדוגמה:

button.addEventListener("נְקִישָׁה", פוּנקצִיָה (מִקרֶה) {
לְנַחֵם.עֵץ("לחצת על כפתור!");
});

הדוגמה שלמעלה השתמשה בביטוי פונקציה שלוקח an מִקרֶה טיעון כהתקשרות ל- addEventListener פוּנקצִיָה. אינך צריך לקרוא לפונקציה במפורש כאשר אתה משתמש בביטוי פונקציה כהתקשרות חוזרת. זה נקרא אוטומטית על ידי פונקציית האב שלו.

במקרה שלעיל, כאשר מאזין האירוע מקבל א נְקִישָׁה אירוע, הוא קורא לפונקציית ה-callback ומעביר את מִקרֶה אובייקט כטיעון.

שלא כמו הצהרות פונקציות, ביטויי פונקציה אינם מונפים, כך שלא ניתן לקרוא להם לפני שתגדיר אותם. ניסיון לגשת לביטוי פונקציה לפני שתגדיר אותו יביא ל-a ReferenceError.

לדוגמה:

isHoisted(); // ReferenceError: לא ניתן לגשת ל-'isHoisted' לפני האתחול
const isHoisted = פוּנקצִיָה () {
לְנַחֵם.עֵץ("הפונקציה מונפת");
};

פונקציות החצים: קומפקטי ומוגבל

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

בניגוד לשיטות אחרות ליצירת פונקציות, פונקציות חצים אינן מצריכות את פוּנקצִיָה מילת מפתח. ביטוי של פונקציית חץ מורכב משלושה חלקים:

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

לדוגמה:

// פרמטר בודד, החזר מרומז
const functionName = פָּרָמֶטֶר =>לְנַחֵם.עֵץ("פונקציית חץ של פרמטר בודד")
// פרמטרים מרובים, החזר מפורש
const functionName = (פרמטר_1, פרמטר_2) => {
לַחֲזוֹר"פונקציית חץ מרובה פרמטרים"
};

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

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

לדוגמה:

const foo = {
 שֵׁם: "דייב",
 לברך: פוּנקצִיָה () {
 setTimeout(() => {
לְנַחֵם.עֵץ(`שלום, שמי ${זֶה.שֵׁם}`);
 }, 1000);
 },
};
foo.greet(); // יומן "שלום, שמי הוא דייב" לאחר שנייה אחת

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

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

להלן המבנה של IIFE:

(פוּנקצִיָה () {
// קוד כאן
})();
(() => {
// קוד כאן
})();
(פוּנקצִיָה (param_1, param_2) {
לְנַחֵם.log (param_1 * param_2);
})(2, 3);

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

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

יצירת פונקציה בדרכים רבות ושונות

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

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