הבלוג של chv 𐧺 מושגים בסיסיים ב-JS: ההבדלים העיקריים בין var, let ו-const

תוכן העניינים:

ב-2015 יצא תקן javascript ES6, ובין הדברים שהוא חידש נמצאים let ו-const. מה המטרה שלהם בעצם ומה הם יותר (ופחות) מ-var >>>

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

אפשר לחלק את ההבדלים העיקריים לארבעה נושאים:

רדקלרציה - הצהרה מחודשת.
שינוי הערך המוצהר.
סקופ (scope). כל משתנה רץ בסקופ (=מרחב, תחום ריצה) שונה. כלומר הוא יהיה נגיש או לא נגיש במקומות מסוימים שמוקצה להם סקופ מוגבל יחסית.
גלובליות. משתנה גלובלי הוא משתנה שנמצא ברמת ה-window.

רדקלרציה

אם הצהרתי כבר על משתנה מסוים, ואני מצהיר כעת שוב על משתנה בדיוק עם אותו השם -

var example = 'this is example'
var example = 'this is more example'

הגעתי למצב של 'רדקלרציה' (דקלרציה - declaration - הצהרה) הצהרה חוזרת, אופציה זו תעבוד רק ב-var. בפונקציות const ו-let תוחזר שגיאה על redeclaration of const בהתאמה.

שינוי הערך

אם אני רוצה לשנות את הערך שהוגדר למשתנה מסוים -

var example = 3
example = 5

הפונקציות שתומכות באפשרות זו הן var ו-let.
משתנה שהוצהר ב-const לא ייתן שישנו את ערכו שוב.

סקופ

ב-JS ישנם תחומי ריצה מסוימים, כלומר בהרצת הפונקציות ישנם מספר מרחבי ריצה ולכל אחד ההרשאות שלו והנתונים שלו.

אפשר למנות שלושה סקופים עיקריים:

window - המאגר בו נמצאים כל האלמנטים של ה-DOM - המרכיבים של אפליקציית הווב הנוכחית. כולל כל הערכים והפרטים שלה המונחים בזיכרון
function - סקופ המוקנה לקטעי קוד שנמצאים בתוך פונקציה
block - קטעי קוד שתחומים בסוגריים מסולסלים { } הם בעלי סקופ פנימי

משתנים עם סקופ ברמת window
על מנת להכניס משתנה ל-window אפשר פשוט להצהיר עליו פשוט להצהיר עליו עם השם שלו תחת window. ככה -

window.example = 3
console.log(window.example) // התוצאה - 3

כל משתנה שהוצהר ב-var מחוץ לבלוק של פונקציה יוצר אוטומטית משתנה מקביל ב-window.
פשוט לראות את זה כאן -

var example = 3
{
  var example = 5
}
console.log(window.example) // התוצאה - 5

מאידך let או const לא יוצרים עותקים ב-window.

משתנים עם סקופ ברמת function או רק block
בעוד var יהיה זמין בכל מרחב הסקופ function שבו הוא הוצהר, let ו-const תקפים רק בבלוק בו הם הוצהרו:

let example = 3
{
  let example = 5
}
console.log(example) // התוצאה - 3

const example = 3
{
  const example = 5
}
console.log(example) // התוצאה - 3

let ו-const לא זמינים מחוץ לבלוק שלהם

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

גלובליות

כל משתנה שנמצא בסקופ [window](https://developer.mozilla.org/en/docs/Web/API/Window) נקרא משתנה גלובלי (פשוט כי הוא זמין בכל מקום בקוד).
בכתיבה טובה של קוד - אם נצרכים למשתנה גלובלי - עדיף פשוט ליצור אותו בדרך היעודית (תואר כבר למעלה) -

window.example = 3
console.log(window.example) // התוצאה - 3

כדאי לדעת שכל משתנה שנוצר ב-var (מחוץ לבלוק של פונקציה) יוצר אוטומטית גם משתנה גלובלי, מקביל אליו ב-window.
אם כי מומלץ ליצור משתנה גלובלי בצורה הרגילה כדלעיל.

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

ℹ אני כותב כאן על גלובליות בנוגע ל-JS בסביבת הדפדפן, ולא על גלובליות ב-JS בנוד, לדוגמא. בנוד אין את window, שם כדי ליצור משתנה גלובלי נשתמש ב-globalThis.

טבלה לסיכום:

	`var`	`let`	`const`
רדקלרציה	✅	❌	❌
שינוי ערך	✅	✅	❌
תחום בבלוק	❌	✅	✅
גלובליות	✅	❌	❌

ולסיכום: תקן ES6 הוסיף את let ו-const כדי לייתר את var הבעייתי (יחסית לחדשים). var ימשיך לעבוד, אבל כדאי להשתמש בכל מקום במצהיר היעודי לו מבין let ו-const. גם ימנע ממכם תקלות שונות וגם יבהיר את הקריאוּת של הקוד שלכם.

אם המשתנה שמוגדר הוא חשוב ובסיסי מאוד באפליקציה - כדאי להשתמש ב-const או לפחות let כדי לוודא שלא יישתנה בשלבים מאוחרים יותר.

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

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

וכמובן התיעוד של הפונקציות (ב-MDN):