DanLevy.net

חידון: האם אתה מכיר JavaScript מודרני?

הוכח את כישורי ה-JavaScript הנכבדים שלך!

האם אתה מזהה ES2015 לעומת ES2022?

1. 

ES2020

מה הערך של result?

console.log(null ?? 100);

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

אופרטור איחוי Null (??) מחזיר את האופרנד הימני (b) אם האופרנד השמאלי (a) הוא null או undefined. במקרה זה, a הוא null, ולכן result הוא 100.

2. 

ES2020

מה תהיה הפלט של הקוד הבא?

const value = false;
const defaultVal = 42;
console.log(value ?? defaultVal);

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

אופרטור איחוי null (??) מתייחס לערכים falsey כמו false כערכים תקפים. מכיוון ש-value הוא false, הוא נחשב לערך תקף ומוחזר.

3. 

שרשור אופציונלי

מה הפלט של הקוד הבא?

const obj = { foo: null };
const result = obj.foo?.bar;
console.log(result);

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

אופרטור השרשור האופציונלי (?.) מפסיק את ההערכה אם הצד השמאלי הוא null או undefined. מכיוון ש-obj.foo הוא null, obj.foo?.bar מוערך ל-undefined.

4. 

BigInt

מה הפלט של הקוד הבא?

const a = 42n;
const result = a * 2n;
console.log(result);

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

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

5. 

ייבוא דינמי

מה יודפס?

const modulePromise = import('./myModule.js');
console.log(typeof modulePromise);

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

הפונקציה import() מחזירה Promise שמתממש לאובייקט המודול. מכיוון שמופעי Promise הם אובייקטים, typeof modulePromise ידפיס 'object'.

6. 

Promise.allSettled

מה תהיה התוצאה של הקוד הבא?

const promises = [
  Promise.resolve('success'),
  Promise.reject('error')
];
Promise.allSettled(promises).then(results => {
  console.log(results[0].status + ': ' + results[0].value);
});

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

Promise.allSettled מחזירה מערך של אובייקטים המתארים את התוצאה של כל הבטחה. ההבטחה הראשונה היא fulfilled עם הערך 'success', לכן הצהרת ה-log תדפיס fulfilled: success.

7. 

String.matchAll

מה מחזירה str.matchAll()?

const str = 'foo1bar2baz3';
const matches = str.matchAll(/\d/g);

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

String.matchAll מחזירה איטרטור של התאמות, לא מערך. ניתן להשתמש באיטרטור זה כדי לקבל את כל קבוצות ההתאמה ממחרוזת.

8. 

Import Meta

מה מייצג import.meta.url?

console.log(import.meta.url);

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

import.meta הוא אובייקט המכיל מטא-דאטה על המודול הנוכחי. המאפיין import.meta.url מייצג את כתובת ה-URL של המודול הנוכחי, שניתן להשתמש בו כדי לקבל מידע על היכן הסקריפט רץ.

9. 

השמה לוגית

מה הערך של a לאחר ההשמה הלוגית?

let a = null;
a ||= 10;
console.log(a);

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

השמת OR לוגי (||=) משימה את הערך מצד ימין אם הערך מצד שמאל הוא falsy (null, undefined, 0, false וכו’). מכיוון ש-a הוא null, הוא מקבל את הערך 10.

10. 

השמה לוגית nullish

מה הערך של b לאחר ההשמה nullish?

let b = null;
b ??= 10;
console.log(b);

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

השמת nullish coalescing (??=) מקצה את הערך מצד ימין אם הערך מצד שמאל הוא null או undefined. מכיוון ש-b הוא null, הוא מקבל את הערך 10.

11. 

WeakRef

מה מספק WeakRef?

const obj = { data: 'important' };
const ref = new WeakRef(obj);
console.log(ref.deref());

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

WeakRef מספקת הפניה חלשה לאובייקט, המאפשרת לאובייקט להיאסף על ידי איסוף הזבל אם אין הפניות אחרות. מכיוון ש- obj עדיין מופנה חזק כאן, deref() מחזירה את האובייקט המקורי. אם היעד היה נאסף, deref() הייתה מחזירה undefined.

Loading comments...