העולם המוזר של var

מילת המפתח var (קיצור של variable) משמשת להגדיר משתנים מאז ימי ראשית ה-JavaScript. יש לה תכונות מסוימות שמייחדות אותה ממקבילותיה בשפות תכנות אחרות. כדאי להכיר את התכונות האלה כדי להימנע מהפתעות.

תכונה ראשונה: var תחום בתוך פונקציה

בדוגמה הבאה, המשתנה myVar מוגדר בתוך הפונקציה, ולכן נוכל לגשת אליו מתוך הפונקציה ולא מחוץ לפונקציה.

function myFunc(){
    var myVar = 1;
    console.log(myVar); // 1
}
myFunc();

console.log(myVar); // error

בגלל שהמשתנה תחום בפונקציה הוא משתנה מקומי של הפונקציה שלא ניתן לגשת אליו מחוץ לפונקציה.

תכונה שנייה: var שמוגדר מחוץ לפונקציה נגיש בתוך הפונקציה

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

var myVar = 2;

function myFunc(){
    console.log(myVar); // 2
}
myFunc();

console.log(myVar); // 2

תכונה שלישית: hoisting

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

function myFunc(){
    console.log(myVar); // undefined

    var myVar = 3;

    console.log(myVar); // 3
}
myFunc();

במידה ולא נגדיר את המשתנה נקבל שגיאה ולא undefined.

function myFunc(){
    console.log(myVar); //error
}
myFunc();

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

דרך אחת לפתור את זה היא תמיד להגדיר את כל המשתנים בתחילת הפונקציה. לדוגמה:

function myFunc(){
     var myNum = 0;
     // some code goes here
     myNum = 42;
}
myFunc();

שאלה ברעיונות עבודה היא מה תוצאת הפונקציה הבאה:

var x = 2;
function myFunc(){
    console.log(x); 

    var x = 1;
}
myFunc();

התוצאה תהיה undefined. מפתיע!! אולי לא. אם מבינים היטב את מושג ה-hoisting לא צריכה להיות בעיה כי ה-hoisting דוחף את הכרזת המשתנים לראש התחום, ובמקרה זה הוא התחום הוא הפונקציה.

ומה תהיה תוצאת ההרצה של הפונקציה הבאה:

var x = 2;
function myFunc(){
    console.log(x); 

    //var x = 1;
}
myFunc();

התוצאה היא 2 לפי התכונה השנייה לעיל.

וזו עוד הוכחה לכך שצריך להיזהר כשמשתמשים ב-var.

תכונה רביעית: לא ניתן להגדיר קבוע באופן פשוט באמצעות var

תכונה נוספת היא שלא ניתן להגדיר קבוע אלא רק משתנה באמצעות var כי תמיד ניתן לדרוס את הערך של המשתנה שהגדרנו. לדוגמה:

function myFunc(){
    var myVar = 4;

    if(1 == 1){
        var myVar = 42;
    }

    console.log(myVar); // 42
}
myFunc();

תכונה חמישית: var אינו תחום ברמת הבלוק

למרות שהמשתנה x מוגדר בדוגמה הבאה ברמת בלוק ה-for, ניתן לגשת אליו גם מחוץ לבלוק.

for(var x=0; x<=5; x++){
     // some code goes here
}

console.log(x); // 5

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

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

מדריכי JavaScript למתקדמים

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

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