ES2019 – תוספות חשובות לתקן של ג׳אווהסקריפט

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

מתודות חדשות של מחיקת רווחים

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

const myString = '  Hello World!  ';
let result = myString.trim();
console.log(result); //"Hello World!"

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

trimStart ו- trimEnd!

טוב, אחרי שהתאוששנו מהאימה, אפשר לנסות ולהבין. ובכן, זה די מובן ואני חושב שהדוגמה הזו תבהיר את הכל:ֿ

const myString = '  Hello World!  ';
let result = myString.trim();
console.log(result); //"Hello World!"
result = myString.trimStart();
console.log(result); //"Hello World!  "
result = myString.trimEnd();
console.log(result); //"  Hello World!"

ומי שממש רוצה לשחק עם זה – הנה ה codepen:

https://codepen.io/barzik/pen/XQrLdm

רגע! אני שומע אתכם צורחים שם ברקע – היה לנו את זה כבר! עם trimLeft ו-trimRight!!! אז נכון, זה היה – אבל זה אף פעם לא היה בתקן באופן רשמי. שתי המתודות החביבות שלעיל לא יעלמו אלא יישארו כ-alias. אושר גדול. וכמובן מתכנתי ה-node יוכלו להנות.

תיאור של משתנה מסוג Symbol

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

const mySymbol = Symbol('This is a description'); 
console.log(mySymbol.description);  //"This is a description"

מעולה, לא?

רגע, אני שומע אתכם צועקים – עשינו את זה קודם עם המרה של Symbol ל-String! אז נכון, היה אפשר לעשות משהו כזה:

const mySymbol = Symbol('This is a description'); 
console.log(String(mySymbol)); // "Symbol(This is a description)"

אבל זה עקום. עדיף ככה. יאי!

https://codepen.io/barzik/pen/rbBEJL

try catch ללא הכרזה על ארגומנט

התוספת השלישית – לא חייבים להעביר ארגומנט ב-try catch. למה זה חשוב? בשביל ה-static code analysis. יש כלל נפוץ שאוסר להעביר משתנה בלי להשתמש בו. א-מ-מ-ה? אם הייתי עושה משהו בסגנון הזה:

try {
    ···
} catch {
    ···
}

זה לא היה עובד. ובכן – עכשיו זה עובד. אושר גדול!

try {
    throw(new Error('This is error'));
} catch {
    console.log('error occured'); // "error occured"
}

https://codepen.io/barzik/pen/OGLevd

מיון מערך יציב

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

const people = [
  {name: 'Ann', age: 20},
  {name: 'Bob', age: 17},
  {name: 'Gary', age: 20},
  {name: 'Sam', age: 17},
  {name: 'Sue', age: 21},
];


// sort people by age
people.sort( (p1, p2) => {
  if (p1.age < p2.age) return -1;
  if (p1.age > p2.age) return 1;
  return 0;
});

console.log(people.map(p => p.name));
// We're expecting people sorted by age, then by the original order (here by name)
// ['Bob', 'Sam', 'Ann', 'Gary', 'Sue']

// But we might get any of these instead, depending on the browser:
// ['Sam', 'Bob', 'Ann', 'Gary', 'Sue']
// ['Bob', 'Sam', 'Gary', 'Ann', 'Sue']
// ['Sam', 'Bob', 'Gary', 'Ann', 'Sue']

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

ואם זה לא הפריע לכם עד עכשיו, אשריכם – כי זה לא יפריע בהמשך. יאי!