var, let, const ב-JavaScript מודרני

מדריך זה מסביר נושא מאוד חשוב לכל מפתח JavaScript באשר הוא, והוא גם שייך לסידרת המדריכים בנושא TypeScript.

פעם, לפני שנים, הדרך היחידה להכריז על משתנים ב-JavaScript הייתה באמצעות מילת המפתח var, אבל השנים חלפו, והיום ניתן להשתמש ב-3 אפשרויות שונות לאותה מטרה (או כמעט לאותה מטרה).

ונתחיל, איך לא, עם var הוותיק והמבלבל.

הכרזה על משתנים באמצעות var

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

וזה מפני שהשימוש ב-var עלול לגרום להתנהגויות בלתי צפויות לכל מי שמגיע משפות נורמליות.

לדוגמה:

* ואתם מוזמנים לנסות את התרגיל הזה, כמו את כל יתר התרגילים במדריך, בקונסולת המפתחים של Chrome.

console.log(x);

התוצאה:

Uncaught ReferenceError: x is not defined

• הודעת השגיאה היא מכיוון שהמשתנה לא קיים.

אבל אם נריץ את הקוד:

console.log(y);
var y = "banana";
console.log(y);

התוצאה תהיה:

undefined
banana

למרות שאנחנו מדפיסים את המשתנה באמצעות console.log() כבר בשורה הראשונה עוד לפני שאנחנו מגדירים את ערכו בשורה השנייה אנחנו מקבלים undefined במקום שגיאה.

למה? זה ממש מבלבל.

כי ב-JavaScript, בניגוד לשפות תכנות אחרות, כשמכריזים על משתנה באמצעות מילת המפתח var המשתנה קיים בכל מקום ב-scope שבתוכו הוא מוגדר. אם הוא מוגדר בתוך פונקציה אז הוא נגיש בכל מקום בתוך הפונקציה. ואם הוא מוגדר, כמו שאנחנו עשינו, ברמה הגלובלית אז הוא נגיש בכל מקום. זה מכיוון שמשתנה המוגדר על ידי var נגיש לכל תחום הפונקציה function scoped.

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

הכרזה על משתנים באמצעות מילת המפתח let

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

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

console.log(z);
let z = "banana";

כשנריץ את הקוד, לדוגמה בקונסולת המפתחים של Chrome, נקבל שגיאה כי אנחנו מנסים להשתמש במשתנה z, לפני שבכלל הגדרנו אותו.

מעבר לכך, let קיים ברמת הבלוק שבתוכו הוא הוכרז, ולא ברמת ה-scope.

נדגים.

נכתוב קוד עם var, ונכריז על x בתוך בלוק של for:

for(var x=0; x<3; x++){
    console.log(`inner x = ${x}`);
}
console.log(`outer x = ${x}`); 

• הערכים שיודפסו בתוך הלולאה יקבלו קידומת inner, ומה שמחוץ ללולאה יודפס עם קידומת outer.

התוצאה:

inner x = 0
inner x = 1
inner x = 2
outer x = 3

• שים לב למה שקורה פה! אנחנו יכולים לגשת למשתנה x למרות שהוכרז בתוך בלוק לולאת for גם מחוץ לבלוק כפי שניתן לראות בפלט:

  outer x = 3

  בגלל שמשתנים שהוכרזו עם var מוגדרים ברמת ה-scope, ולא ברמת הבלוק.

וזה נכון גם לסוגים אחרים של בלוקים, דוגמת לולאת while ובלוק תנאי if.

בוא נראה עכשיו מה יקרה אם נגדיר את המשתנה באמצעות let (ולא באמצעות var):

for(let x=0; x<3; x++){
    console.log(`inner x = ${x}`);
}
console.log(`outer x = ${x}`);

התוצאה:

inner x = 0
inner x = 1
inner x = 2
inner x = 3
Uncaught ReferenceError: x is not defined

• כל עוד אנחנו מדפיסים בתוך הלולאה אין בעיה לגשת למשתנה x אבל מחוץ ללולאה אנחנו מקבלים שגיאה. והסיבה לשגיאה היא שמשתנה שהוכרז באמצעות let קיים רק בתוך הבלוק שבתוכו הוכרז, ולא קיים מחוץ לבלוק.

לסיכום, ניתן להכריז על משתנים באמצעות let או באמצעות var, וישנם שני הבדלים בין משתנים שהוכרזו באמצעות let או var.

• הראשון, ש-let קיים רק ברמת הבלוק, ולא ברמת ה-scope.
• והשני, ששימוש ב-var מאפשר לנו להשתמש במשתנה עוד לפני שהכרזנו עליו.

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

הכרזה על קבועים באמצעות מילת המפתח const

כדי להכריז על קבועים ב-JavaScript נשתמש במילת המפתח const.

לדוגמה:

const MYNAMEIS = "yossi";
console.log(MYNAMEIS);

• את שמו של הקבוע נקפיד לכתוב באותיות גדולות.

אם עכשיו ננסה להציב ערך אחר בתור ערכו של הקבוע:

const MYNAMEIS = "yossi";
MYNAMEIS = "Slim Shady";

נקבל שגיאה:

Uncaught TypeError: Assignment to constant variable.

• זה ההבדל העקרוני ממשתנה, והסיבה שבגללה קבוע הוא קבוע. כי אסור שערכו של הקבוע ישתנה.

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

ניתן גם להגדיר קבועים באמצעות מילת המפתח const, ואת ערכם של קבועים, בניגוד לערכם של משתנים, אי אפשר לשנות.

מה שכתבתי לגבי קבועים הוא כמעט נכון כי יש מקרים מסוימים שבהם ניתן לשנות את הערך של const. למה? JavaScript! זה למה.

בוא נראה מה קורה כשמציבים אובייקט בתור ערכו של קבוע.

const PERSON = {name: "yossi", occupation: "developer"};

• להציב אובייקט בתור ערך של קבוע JavaScript עם זה אין בעיה.

אם ננסה לדרוס את האובייקט כולו נקבל שגיאה:

const PERSON = {name: "yossi", occupation: "developer"};
const PERSON = null;

התוצאה:

Uncaught SyntaxError: Identifier 'PERSON' has already been declared

• סיבת השגיאה ברורה, והיא נובעת מזה שאנחנו מנסים לשנות את ערכו של קבוע.

אבל פה צריך להיזהר!!

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

לדוגמה, נמשיך עם אותו האובייקט, PERSON, ונגדיר ערכים חדשים לשדות:

// Declare a constant
const PERSON = {name: "yossi", occupation: "developer"};

// Override individual fields
PERSON.name = "Eminem";
PERSON.occupation = "rapper";

נריץ את הקוד, ונגלה שאכן הצלחנו להגדיר מחדש את הערכים שמוצבים לשדות:

// Declare a constant
const PERSON = {name: "yossi", occupation: "developer"};

// Override individual fields
PERSON.name = "Eminem";
PERSON.occupation = "rapper";

// Output
console.log(`${PERSON.name} is a ${PERSON.occupation}`);

התוצאה:

Eminem is a rapper

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

להתראות!

לכל מדריכי ה-TypeScript

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים