return values - ערכים המוחזרים מפונקציה

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

ידע מוקדם:

הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, סיום במלואו של מודול צעדים ראשונים ב-JavaScript. וכן, את המאמר בנושא Functions — פונקציות - חלקי קוד לשימוש חוזר.

מטרה: להבין מהם return values, וכיצד להתשמש בהם.

מה הם return values?

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

var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made

ראינו את הקוד הזה בעבר במאמר הראשון בנושא פונקציות. אנחנו קוראים/מפעילים את הפונקציה ()replace על המחרוזת myText ומעבירים לה שני פרמטרים (ארגומנטים) - את המחרוזת משנה('string') שהיא צריכה לחפש במחרוזת הראשית (myText) ואת המחרוזת משנה החדשה שתחליף את המחרוזת משנה שנמצאה ('sausage'). כאשר פונקציה זו מסיימת - משלימה את הריצה שלה, היא מחזירה ערך, שהוא בעצם המחרוזת החדשה עם ההחלפה שבוצgה. בקוד למעלה, אנחנו שומרים את אותו ערך מוחזר כערך של המשתנה newString שלנו.

אם תעיפו מבט על הדף שלנו בנושא פונקציית ()replace, אתם תראו חלק שנקרא Return value. תמיד חשוב לדעת ולהבין אלו ערכים מוחזרים על ידי פונקציה, על מנת שנוכל להשתמש בהם אם נרצה או כשנצטרך.

חלק מהפונקציות לא מחזירות return value. במקרים כאלו, הערך המוחזר יהיה void או undefined. לדוגמא, בפונקציה ()displayMessage שבנינו במאמר הקודם, אין ערך מוחזר כתוצאה מהשלמת ריצת הפונקציה. היא רק גרמה לקופסא להיות מוצגת איפשהו על המסך.

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

שימוש ב- return values בפונקציות שלנו

על מנת להחזיר ערך מפונקציה שאנחנו בונים, אנחנו צריכים להשתמש במילה השמורה return. ראינו מילה זו בפעולה לאחרונה בתרגול שלנו בנושא random-canvas-circles.html. פונקציית ()draw שלנו מציירת 100 עיגולים אקראיים על האלמנט <canvas>:

function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (var i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

בכל איטרציה של הלולאה, מבוצעות שלוש קריאות לפונקציה ()random, על מנת לייצר מספר אקראי לקוארדינטות x ו-y של העיגול הנוכחי וכן לרדיוס שלו. הפונקציה ()random מקבלת ארגומנט אחד - מספר שלם - ומחזירה מספר שלם בין 0 לאותו מספר שלם שהכנסנו לה כארגומנט. זה נראה כך:

function randomNumber(number) {
  return Math.floor(Math.random()*number);
}

הקוד למעלה היה יכול להירשם גם כך:

function randomNumber(number) {
  var result = Math.floor(Math.random()*number);
  return result;
}

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

אנחנו מחזירים את התוצאה של החישוב (Math.floor(Math.random()*number בכל פעם שקוראים לפונקציה. הערכים המוחזרים הללו מופיעים ברגע שהפונקציה נקראת (מופעלת), והקוד ממשיך. לדוגמא, אם נריץ את השורות הבאות:

ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);

ושלושת הקריאות לפונקציה ()random החזירו נניח את הערכים 500, 200, ו- 35, בהתאמה, השורה תרוץ בפועל כאילו היא נכתבה כך :

ctx.arc(500, 200, 35, 0, 2 * Math.PI);

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

למידה עצמאית: הגדרת - return value של הפונקציה שלנו

בתרגול זה אנחנו נכתוב פונקציות משלנו הכוללות return values.

  1. ראשית, שמרו עותק מקומי של הקובץ function-library.html מ-GitHub. זהו דף HTML פשוט המיכל שדה טקסט <input> ופסקה. בנוסף יש גם אלמנט <script> כאשר בתוכו עשינו הפנייה לשני האלמנטים של ה-HTML בתוך שני משתנים. דף זה יאפשר לנו להכניס מספר כלשהו לתוך תיבת טקסט, ולהציג חישובים שונים על המספר הזה בתוך הפסקה שמתחת.
  2. כעת, נוסיף פונקציות בתוך <script>. מתחת לשתי השורות הקיימות של JavaScript, הוסיפו את הגדרות הפונקציות הבאות:
    function squared(num) {
      return num * num;
    }
    
    function cubed(num) {
      return num * num * num;
    }
    
    function factorial(num) {
      var x = num;
      while (x > 1) {
        num *= x-1;
        x--;
      }
      return num;
    }
    הפונקציות ()squared ו- ()cubed דיי ברורות - הן מחזירות את תוצאות ההכפלה או את השילוש של מספר שניתן להן כפרמטר, בעצמו. הפונקציה ()factorial מחזירה את תוצאת העצרת של מספר מסויים. אם אתם לא זוכרים מה זה עצרת, ראו הסבר על הערך בויקיפדיה.
  3. כעת, אנחנו הולכים להוסיף דרך להדפיס את כל המידע הזה לגבי המספר שהכנסנו. הכניסו את הקוד הבא, מתחת לפונקציות הנוכחיות:
    input.onchange = function() {
      var num = input.value;
      if (isNaN(num)) {
        para.textContent = 'You need to enter a number!';
      } else {
        para.textContent = num + ' squared is ' + squared(num) + '. ' +
                           num + ' cubed is ' + cubed(num) + '. ' +
                           num + ' factorial is ' + factorial(num) + '.';
      }
    }

    הוספנו פונקציה בתור ״מטפל אירוע״ אשר תרוץ כל פעם שאירוע מסוג onchange החל להתרחש בשדה הטקסט שלנו (input), כלומר - כל פעם שמוכנס ערך חדש לתוך שדה הטקסט והערך הזה הוגש - כלומר לחצנו על אנטר או עברנו לאלמנט אחר בדף. כאשר פונקציה אנונימית זו רצה, הערך שהוכנס לתוך שדה הטקסט מאוחסן בתוך המשתנה num.

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

    1. אם הערך שהוכנס אינו מספר, אנחנו נציג הודעת שגיאה לתוך הפסקה. המבחן שלנו מבצע שימוש בפונקציית ()isNaN אשר בודקת האם הערך שהוכנס ב-num הוא לא מספר. אם הערך שהוכנס הוא מספר - היא מחזירה false ואם הוא לא מספר היא מחזירה true.

    2. אם המבחן שלנו החזיר false, אז הערך של num הוא מספר ואנחנו יכולים להדפיס לתוך האלמנט p שלנו מהו תוצאת ההכפלה, השילוש והעצרת שלו. המשפט שלנו קורא לפונקציות ()squared(), cubed, ו- ()factorial על מנת לקבל את הערכים הללו.

  5. שמרו את הקוד ונסו אותו בדפדפן שלכם.

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

תרגיל זה ניסה להציג לכם כמה מהנקודות החשובות של ביטוי return. בנוסף:

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

לסיכום

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

ראו גם

  • Functions in-depth — מדריך מפורט בנושא פונקציות המפרט לעומק את האפשרויות השונות של הפונקציות, סינטקסים אפשריים נוספים ועוד.
  • Callback functions ב- JavaScript — תבנית נפוצה ב-JavaScript היא להעביר פונקציה כארגומנט לתוך פונקציה אחרת, ואז הפונקציה נקראת בתוך הפונקציה שהיא הועברה אליה. מומלץ להרחיב את הידע בנושא.

במודול זה