תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

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

מחבר:
בתאריך:

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

 

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

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

var, let, const javascript

   

הכרזה על משתנים באמצעות 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 כוכבים

 

 

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

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

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

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

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

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

מתי הוקמה המדינה?

 

תמונת המגיב

יפית בתאריך: 14.02.2018

תודה רבה לך על מאמר מובן ודוגמאות מעולות

תמונת המגיב

יוסי בן הרוש בתאריך: 17.02.2018

בשמחה

תמונת המגיב

יאיר בתאריך: 29.03.2018

אחלה הסבר!!

תמונת המגיב

יוסי בן הרוש בתאריך: 29.03.2018

בשמחה, יאיר.

תמונת המגיב

חזי בתאריך: 16.10.2019

חזק מאוד!
בטעות הצבעתי ציון נמוך אבל יפה מאוד

תמונת המגיב

אייל בתאריך: 07.07.2020

תודה רבה! כל הכבוד לך על ההשקעה. זה עוזר לי מאוד!

תמונת המגיב

תת בתאריך: 12.09.2022

toda raba