var, let ו-const מוסברים- והמלכודת של == מול ===

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

var - השאריה מהעבר

var היה הדרך היחידה להגדיר משתנה ב-JavaScript עד 2015, וכיום הוא נחשב למיושן שכדאי להימנע ממנו. הבעיה שלו היא ה-scope - התחום שבו המשתנה קיים. משתנה שמוגדר עם var לא מוגבל לבלוק שבו הוא נכתב (כמו תוך if או לולאה), אלא "בורח" לכל הפונקציה שמסביב. זה יוצר באגים מוזרים - משתנה שהגדרתם בתוך לולאה נשאר נגיש גם אחרי שהלולאה נגמרה, ולפעמים אפילו דורס בטעות משתנה אחר עם אותו שם שהוגדר במקום אחר בפונקציה.

let ו-const - הפתרון

let ו-const נולדו כדי לתקן את זה. שניהם מוגבלים ל-block scope - כלומר, אם הגדרתם אותם בתוך סוגריים מסולסלים, כמו בתוך if או לולאה, הם קיימים רק שם ולא בורחים החוצה. ההבדל בין השניים הוא פשוט - let מאפשר לשנות את הערך אחר כך, ו-const לא. ברגע שהצהרתם על const, אי אפשר להצמיד לו ערך חדש.

חשוב להבין דקה כאן - const לא הופך אובייקט למשהו "בלתי ניתן לשינוי" לגמרי. אם הצהרתם const user = {name: "דני"}, אי אפשר להחליף את user לגמרי לאובייקט אחר, אבל אפשר בהחלט לשנות תכונות בתוכו, כמו user.name = "רון". const נועל את המשתנה עצמו, לא את התוכן שלו.

הכלל המעשי שרוב המתכנתים היום עובדים לפיו - השתמשו ב-const כברירת מחדל תמיד, ועברו ל-let רק כשאתם באמת יודעים שתצטרכו לשנות את הערך מאוחר יותר. וב-var, פשוט אל תשתמשו בכלל.

== מול === - המלכודת השקטה

עכשיו לחלק שבאמת מבלבל. JavaScript נותנת לכם שני סימני שוויון - == ו-===. שניהם בודקים אם שני ערכים שווים, אבל בדרך שונה לגמרי. === בודק שוויון קפדני - גם הערך וגם הסוג (type) חייבים להיות זהים. == בודק שוויון "רופף" - אם הסוגים שונים, JavaScript מנסה להמיר אותם לסוג משותף לפני ההשוואה, בתהליך שנקרא type coercion.

זה נשמע נוח, אבל זה בדיוק מה שהופך == למסוכן. תבדקו 0 == false ותקבלו true. תבדקו "" == false ותקבלו גם true. תבדקו null == undefined ותקבלו true. ההמרות האוטומטיות האלה לא תמיד אינטואיטיביות, ולפעמים גורמות לבאגים ששקטים ומקשים למצוא - קוד שנראה כאילו הוא בודק תנאי הגיוני, אבל בפועל מתנהג בצורה לא צפויה בגלל המרה נסתרת.

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

למה זה חשוב יותר משנראה

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

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

נתקלתם בבאג מוזר שקשור להשוואה או ל-scope ולא הבנתם למה? בואו לשאול בקהילה.

הצטרפו לקהילה בדיסקורד