17 KiB

Raw Blame History Unescape Escape

יסודות JavaScript: מתודות ופונקציות

איור מאת Tomomi Imura

שאלון לפני השיעור

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

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

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

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

ניתן לקחת את השיעור הזה ב-Microsoft Learn!

פונקציות

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

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

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

יצירה והפעלה של פונקציה

בוא נבחן איך ליצור פונקציה. התחביר עוקב אחר תבנית עקבית:

function nameOfFunction() { // function definition
 // function definition/body
}

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

מילת המפתח function אומרת ל-JavaScript "היי, אני יוצר פונקציה!"
nameOfFunction הוא המקום שבו אתה נותן לפונקציה שלך שם תיאורי
הסוגריים () הם המקום שבו אתה יכול להוסיף פרמטרים (נגיע לזה בקרוב)
הסוגריים המסולסלים {} מכילים את הקוד שמופעל כשאתה קורא לפונקציה

בואו ניצור פונקציה פשוטה לברכה כדי לראות את זה בפעולה:

function displayGreeting() {
  console.log('Hello, world!');
}

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

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

// calling our function
displayGreeting();

כשאתה מפעיל את השורה הזו, היא מפעילה את כל הקוד בתוך הפונקציה displayGreeting, ומציגה "Hello, world!" בקונסול של הדפדפן שלך. אתה יכול לקרוא לפונקציה הזו שוב ושוב.

Note: השתמשת ב-מתודות לאורך כל השיעורים האלה. console.log() היא מתודה – למעשה פונקציה ששייכת לאובייקט console. ההבדל המרכזי הוא שמתודות מחוברות לאובייקטים, בעוד פונקציות עומדות באופן עצמאי. הרבה מפתחים משתמשים במונחים האלה באופן חלופי בשיחה יומיומית.

שיטות עבודה מומלצות לפונקציות

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

תן לפונקציות שלך שמות ברורים ותיאוריים – העתיד שלך יודה לך!
השתמש ב-camelCasing לשמות עם כמה מילים (כמו calculateTotal במקום calculate_total)
שמור על כל פונקציה ממוקדת בביצוע משימה אחת בצורה טובה

העברת מידע לפונקציה

הפונקציה שלנו displayGreeting מוגבלת – היא יכולה להציג רק "Hello, world!" לכולם. פרמטרים מאפשרים לנו להפוך את הפונקציות ליותר גמישות ושימושיות.

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

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

function name(param, param2, param3) {

}

כל פרמטר פועל כמו מקום שמור – כשמישהו קורא לפונקציה שלך, הוא יספק ערכים אמיתיים שיתווספו למקומות האלה.

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

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

שימו לב איך אנחנו משתמשים בגרשיים הפוכים (`) וב-${} כדי להכניס את השם ישירות להודעה שלנו – זה נקרא תבנית ליטרלית, וזה דרך מאוד נוחה לבנות מחרוזות עם משתנים משולבים.

עכשיו כשאנחנו קוראים לפונקציה שלנו, אנחנו יכולים להעביר כל שם:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

JavaScript לוקחת את המחרוזת 'Christopher', משייכת אותה לפרמטר name, ויוצרת את ההודעה האישית "Hello, Christopher!"

ערכי ברירת מחדל

מה אם אנחנו רוצים להפוך כמה פרמטרים לאופציונליים? כאן ערכי ברירת מחדל נכנסים לתמונה!

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

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

כאן, name עדיין נדרש, אבל ל-salutation יש ערך גיבוי של 'Hello' אם אף אחד לא מספק ברכה אחרת.

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

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

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

ערכי החזרה

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

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

כדי לשלוח ערך בחזרה, אתה משתמש במילת המפתח return ואחריה מה שאתה רוצה להחזיר:

return myVariable;

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

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

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

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

כדי להשתמש בערך המוחזר, אנחנו יכולים לשמור אותו במשתנה בדיוק כמו כל ערך אחר:

const greetingMessage = createGreetingMessage('Christopher');

עכשיו greetingMessage מכיל "Hello, Christopher" ואנחנו יכולים להשתמש בו בכל מקום בקוד שלנו – להציג אותו בדף אינטרנט, לכלול אותו במייל או להעביר אותו לפונקציה אחרת.

פונקציות כפרמטרים לפונקציות

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

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

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

נסה את הקוד הזה – אחרי 3 שניות, תראה הודעה:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

שימו לב איך אנחנו מעבירים את displayDone (בלי סוגריים) ל-setTimeout. אנחנו לא קוראים לפונקציה בעצמנו – אנחנו מעבירים אותה ל-setTimeout ואומרים "תפעיל את זה בעוד 3 שניות."

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

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

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

הנה איך אנחנו יכולים לכתוב מחדש את הדוגמה של השעון עם פונקציה אנונימית:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

זה משיג את אותה תוצאה, אבל הפונקציה מוגדרת ישירות בתוך הקריאה ל-setTimeout, מה שמבטל את הצורך בהצהרת פונקציה נפרדת.

פונקציות חץ

JavaScript מודרנית מציעה דרך אפילו קצרה יותר לכתוב פונקציות שנקראת פונקציות חץ. הן משתמשות ב-=> (שנראה כמו חץ – הבנתם?) והן מאוד פופולריות בקרב מפתחים.

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

הנה הדוגמה שלנו עם השעון באמצעות פונקציית חץ:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

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

מתי להשתמש בכל אסטרטגיה

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

🚀 אתגר

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

אתגר סוכן GitHub Copilot 🚀

השתמש במצב סוכן כדי להשלים את האתגר הבא:

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

הנחיה: צור קובץ JavaScript בשם mathUtils.js שמכיל את הפונקציות הבאות:

פונקציה add שלוקחת שני פרמטרים ומחזירה את הסכום שלהם
פונקציה multiply עם ערכי פרמטר ברירת מחדל (הפרמטר השני ברירת מחדל ל-1)
פונקציית חץ square שלוקחת מספר ומחזירה את הריבוע שלו
פונקציה calculate שמקבלת פונקציה אחרת כפרמטר ושני מספרים, ואז מיישמת את הפונקציה על המספרים
הדגמה של קריאה לכל פונקציה עם מקרי בדיקה מתאימים

למד עוד על מצב סוכן כאן.

שאלון אחרי השיעור

סקירה ולימוד עצמי

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

משימה

כיף עם פונקציות

הצהרת אחריות:
מסמך זה תורגם באמצעות שירות תרגום AI Co-op Translator. למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.

17 KiB Raw Blame History Unescape Escape