קטגוריות
JavaScript

מה זה הפרמטר rest ב- JavaScript ואיך משתמשים בו

על מנת להבין את הפרמטר rest קודם נתחיל בהסבר על איזה בעיה הוא בא לפתור.

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

function sum (x, y) {
  return x + y;
}

sum (1, 2)
//3

ניתן לראות שהפונקציה קיבלה 2 משתנים בשם x ו- y ומחזירה את הסכום של 2 המספרים.

אבל מה נעשה אם נרצה לתמוך במספר פרמטרים לא ידוע? בעבר היינו יכולים לעשות זאת באמצעות שימוש ב- arguments.

מה זה arguments ב JavaScript?

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

לדוגמא, נוכל לממש את הפונקציה sum באמצעות arguments כך:

function sum () {
  var result = 0;
  for (i = 0; i < arguments.length; i++) {
  	result += arguments[i];
  }
  return result;
} 

var sumResult = sum(1, 2, 3);

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

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

מה החסרונות בלעבוד עם arguments?

  1. החסרון הראשון הוא ש- arguments אולי נראה כמו מערך אבל הוא לא, מה שאומר שאין לו תמיכה בפונקציות שאנחנו מקבלים כאשר אנחנו עובדים עם מערכים ב- JavaScript כך שכאשר נצטרך לשחק קצת עם הפרמטרים נתקל באתגרים.
function sum () {
  var numOfArguments = arguments.length;    //OK
  var firstArgument = arguments[0];    //OK
  
  var allTheArgumentsExceptTheFirst = arguments.slice(1);    //ERROR!
} 
  1. החסרון השני בשימוש באובייקט arguments הוא ש- arguments תמיד מחזיר את כל הפרמטרים ובמידה ונרצה לשלב בין פרמטרים קבועים לפרמטרים דינמיים נצטרך לסנן מתוך האובייקט arguments את הפרמטרים הקבועים על מנת לקבל את הפרמטרים הדינמיים בלבד.

ניתן לראות זאת בדוגמא הבאה

function printPerson (name) {
  console.log(name);
  //David
  
  console.log(arguments);
  //['David', 34, 'Developer']
} 

printPerson('David', 34, 'Developer');

שימו לב שהפרמטר name שקיבל את הערך David מופיע פעמיים: גם בפרמטר name וגם האיבר הראשון בתוך arguments.



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

הפרמטר rest ב- JavaScript

הפרמטר rest מאפשר לנו משהו שדומה לאובייקט arguments אך עם שיפורים.

היתרון הראשון הוא שהפרמטר rest יחזיר לנו רק את הפרמטרים שלא נקלטו במשתנים אחרים.

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

השימוש בפרמט מסוג rest מתבצע על ידי כתיבת שלוש נקודות לפני שם הפרמטר בפונקציה. למשל, אם נרצה לקרוא לפרמטר שנרצה שיהיה פרמטר ה-rest שלנו moreInfo, נוסיף לו שלוש נקודות לפני השם והוא יראה כך …moreInfo. כאשר נרצה להשתמש בו בתוך הפונקציה נוכל לקרוא לו רק בשם ללא שלוש הנקודות, כלומר moreInfo.

בקוד הבא אפשר לראות איך הפונקציה printPerson מקבלת פרמטר מסוג rest שנקרא personInfo, איך מגדירים אותו, משתמשים בו בפונקציה ואת כך שהוא מכיל רק את הנתונים שלא נקלטו בפרמטר שבא לפניו (name)

function printPerson (name, ...personInfo) {
  console.log(name);
  //David
  
  console.log(personInfo);
  //[34, 'Developer']
} 

printPerson('David', 34, 'Developer');

הערות לגבי השימוש בפרמטרים מסוג rest

  1. שימו לב שכאשר משתמשים בפרמטר מסוג rest הוא חייב להיות הפרמטר האחרון ולא יכול להיות אחריו פרמטר נוסף. לדוגמא:
function print(name, ...personData, age) {} 	//BAD! :-(
function print(name, age, ...personData) {} 	//GOOD :-)
  1. צריך לבדוק האם הדפדפן שאתם עובדים עליו תומך בפרמטר rest. ניתן לבדוק זאת באתר can i use (rest-parameters).
שתף:

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *