The importance of "var" before a variable.

Hi Tayler,

Leaving off the var can lead to inadvertently setting/changing global variables. For example:

color = "blue";

function a() {
  var color = "green";
  alert('I just set a local variable in function a and it is set to: ' + color);
}

function b() {
  color = "yellow";
  alert('In function b however, I omitted the var and now my color (' + color + ') will leak into the globa scope!')
}

alert("Before either function runs, the color is: " + color);
alert("Runnign function a");
a();
alert('After function a ran, the color is still: ' + color);
alert("Running function b");
b();
alert('Uh oh, now the color outside of the function is: ' + color);

function secretHolder() {
  var favoriteDrink = prompt("What is your favorite drink?");
}

function notASecretHolder() {
  favoriteFood = prompt('What is your favorite food?');
}

var favoriteDrink = "unknown";
var favoriteFood = "unknown";

secretHolder();
alert('Favorite drink: ' + favoriteDrink)

notASecretHolder();
alert('I can still access favoriteFood outside of the function, because the var was omitted: ' + favoriteFood);

So let's look at the favorite drink/food example in more depth. The browsers of today are very complex with how they compile/run the code - but the basic idea is this:

There is a function statement for secretHolder. Since we are in the global scope, I will store it there to be accessed anywhere in the application. I will also store the function's code now. (Repeat for notASecretHolder)

There is a variable declaration for favoriteDrink. Since we are in the global scope, I will set aside space in memory for it in the global scope, but set it to undefined for now. (Repeat for secretHolder)

Okay, second passthrough: I have a reference to a favoriteDrink, was this declared in the global scope? Since it was, its "unknown" string value will get assigned to it. (Repeat for favoriteFood)

The code wants to run secretHolder

• does it exist? - Yes

• is it a function? - Yes

Running it...

• Creating a new scope for this instance of secretHolder

• There is a variable declaration for favoriteDrink. since I am inside the secretHolder scope, I will set aside memory for it inside this current (local) scope.

• Second passthrough - Ok, run the prompt and assign the value to favoriteDrink

• Does favoriteDrink exist on the secretHolder scope? = Yes, assign the value to it Exit secretHolder function instance

The code wants to run notASecretHolder

• does it exist? Yes

• is it a function? Yes

Running it

• Creating a new scope for this instance of notASecretHolder

• There are no variable declarations NOTE THE DIFFERENCE HERE

• Second passthrough - Ok run the prompt and then assign it to FavoriteFood

• Does favoriteFood exist on the notASecretHolder scope? - No

• Checking the next scope out, which is the global scope - does favoriteFood exist here? - Yes -assign the value of the prompt to the favoriteFood variable on the global scope.

Exiting notASecretHolder

(As a side note, if it did not exist on the global scope, it would then create the variable on the global scope, unless in Strict Mode)

(My understanding of this comes largely from Kyle Simpson's Scope and Closures book in the You Don't Know JS series. My interpretation is probably imperfect, so I would recommend you check out that book).