ES2017 – פסיקים בסוף

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

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


function myFunction(arg1,
                    arg2,
                    arg3,) {
  //Whatever
};

myFunction(1,2,3);

זה מה שקורה כשמנסים להריץ אותו:

function myFunction(arg1,                     arg2,                     arg3,) {   //Whatever };  myFunction(1,2,3);  VM291:3 Uncaught SyntaxError: Unexpected token )

SyntaxError: Unexpected token )

למה אנחנו מקבלים את השגיאה הזו? כי יש פסיק נוסף ברשימת הארגומנטים מיד לאחר הארגומנט האחרון. ES7 קובע, בפיצ׳ר Syntax trailing function commas נקבע שפסיק שבא לאחר הארגומנט האחרון אינו שגיאה יותר. כלומר הקוד שלעיל יעבוד.

מה שה-babel עושה זה להוריד את הפסיק האחרון כמובן. בפיצ׳ר הזה הוא לא עובד קשה מדי. כלומר מהרגע שאתם מפעילים ב-babel את Syntax trailing function commas plugin או את ES2017 preset שכולל אותו, אתם יכולים להשאיר את הפסיק הנוסף בארגומנט האחרון מרשימת הארגומנטים.

זהו. זה כל הפיצ׳ר. נכון פשוט?

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


function myFunction(arg1,
                    arg2,
                    arg3
                    ) {
  //Whatever
};

אני רוצה להוסיף לו ארגומנט נוסף. משהו בסגנון הזה:


function myFunction(arg1,
                    arg2,
                    arg3,
                    arg4
                    ) {
  //Whatever
};

לא שינוי גדול במיוחד. אני עושה קומיט ודוחף את הקוד ל-pull request. מי שיסתכל על ההבדל בין הקוד הישן לחדש יראה משהו כזה:

תצוגת הבדלים סטנדרטים בין הקוד הישן לקוד החדש. נראה הבדל של שתי שורות ולא של שורה אחת

תצוגת הבדלים סטנדרטים בין הקוד הישן לקוד החדש. נראה הבדל של שתי שורות ולא של שורה אחת

זה נראה כאילו מחקנו שורה אחת והוספנו שתי שורות. זה נובע מכך שתוכנת ה-diff המחשבת את ההבדלים קולטת את שחל שינוי בשורה הכוללת את arg3 בגלל הוספת הפסיק ומחשבת את השינוי הזה כמחיקה.
לעומת זאת, אם אנו מאפשרים פסיק אחרון, כמו בתקן es2017, אז השינוי יראה כך:

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

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

עכשיו תוכנת ה-diff מראה לי שינוי אחד ויחיד של הוספת arg4. מאוד נעים ונחמד. כמו שצריך.

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

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (5 הצבעות, ממוצע: 5.00 מתוך 5)

תגיות: פורסם בקטגוריה: ES20XX

אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.