נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

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

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

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

המדריכים הקודמים בסדרת ה-Typescript הם:

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

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

var, let, const javascript

 

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

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

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

לדוגמה:

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

if(x == 1){
    console.log("apple");
} else {
    console.log("bannana");
}

var x = 2;// bannana

התוצאה היא bannana, למרות ש-x מוכרז רק אחרי הבלוק של של ה-if.

למה?

כי ב-javascript כשמכריזים על משתנה באמצעות מילת המפתח var המשתנה נדחף לראש ה-scope שבתוכו הוא מוגדר, ובמקרה שלנו לפני הבלוק של ה-if. זו התנהגות שמכונה hoisting, והיא מאפשרת לנו קודם להשתמש במשתנים, ורק אחר כך להכריז עליהם.

 

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

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

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

if(x == 1){
    console.log("apple");
} else {
    console.log("bannana");
}

let x = 2;

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

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

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

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

console.log(x); // 3

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

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

לעומת זאת, אם נשתמש ב-let נקבל תוצאה שונה:

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

console.log(x); // Uncaught ReferenceError: x is not defined

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

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

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

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

 

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

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

כמו בדוגמה:

const MYNAMEIS = "yossi";

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

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

MYNAMEIS = "Slim Shady"; // Uncaught TypeError: Assignment to constant variable.

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

 

אפשר גם להציב אובייקט בתור ערך של קבוע, לדוגמה:

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

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

const PERSON = null; // Uncaught SyntaxError: Identifier 'PERSON' has already been declared

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

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

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

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

PERSON.name = "Eminem";
PERSON.occupation = "rapper";

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

console.log(PERSON.name + " is a " +PERSON.occupation); // Eminem is a rapper

 

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

להתראות!

 

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

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

 

= 6 + 8