בקורס על JavaScript לימדתי אוביקטים ורציתי להראות שכשמנסים לגשת לשדה שלא קיים באוביקט מקבלים undefined. אז כתבתי בקונסול:

{a: 10}['b']

אבל מה שהודפס לא היה undefined אלא:

{a: 10}['b']
16:05:00.902 ['b']

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

1. הסבר ופיתרון

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

// use {} to create an object
const x = {a: 10, b: 20};
console.log(x.a);

// use {} to create a block of code
if (2 < 5) { console.log('ok'); }

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

a: 10

מבחינת JavaScript זה תחביר תקני עבור Labeled statement, שזו דרך לסמן את השורה בתווית (במקרה הזה התווית היא a) כדי שאפשר יהיה לדלג אליה מאוחר יותר מתוך לולאה.

הקוד המסתורי:

{a: 10}['b']

בעצם אומר:

1. פתח בלוק חדש של קוד.
2. בתוכו תכתוב שורה אחת שהיא הביטוי 10, ויש לו תווית a.
3. סגור את בלוק הקוד.
4. צור מערך של איבר אחד 'b' ותחזיר אותו.

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

{[window.name]: 'test'}['b']

ותראו שהפעם אתם פשוט מקבלים Exception. אי אפשר להשתמש בסוגריים מרובעים בתור תווית ולכן כרום זורק:

Uncaught SyntaxError: Unexpected token ':'

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

({a: 10})['b']
undefined