Creating Variables with var

[00:00:00]
>> WebDevSimplified: Now in this next section we're going to be moving on to some more advanced concepts specifically related to variables because we've really only brushed the surface. Now you may remember I talked about how there's three different ways to define variables, and that third way is var, and var is kind of the old way of defining variables. Back when JavaScript was first made, var was the only keyword available for making variables, but it has a lot of confusing behaviors that are really different than normal programming languages work.

[00:00:24]
So they created let and const to kind of fix some of those behaviors. So var works almost exactly the same as let when you create a variable. You just use the var keyword instead of let, give your variable a name and a value, and now you can use that variable just like you would a let variable. So if we copy over this code, we'll just paste this down. You can see it's printing out one and two, and this var variable is pretty much interchangeable with let for the basic use cases, all the same things that apply to let related to being the rename and variable, and so on.

[00:00:53]
They apply directly to var. So we need to talk about what some of the problems with var are because like I said, it's the original way that variables were created in JavaScript and they do things a little bit differently. The first and probably most confusing is that var actually uses the function scope instead of the block scope. I mentioned that block scope is pretty much the only scope you need to worry about, and that function scope is rather niche.

[00:01:14]
This is that niche scenario where a function scope comes in handy. So if we just copy over this code real quick and we paste it down, you'll notice that I create a scope right here. This is a block level scope and I create a variable called A equals one, and normally if this was a let variable, none of my code would work. But if I save my file, you'll see it still prints out one, and that's because any variable defined using var is scoped only to the function scope and not to the block scope.

[00:01:39]
So it actually ignores this entire scope that it's inside of and instead pretends it's inside of this function scope. So really the way JavaScript sees this code is as if these brackets didn't even exist at all. Now obviously if I tried doing this with let, I would get an error because let is inside of this scope, which means it's not accessible outside its scope. But again, since var uses function scoping instead, it pretends those brackets don't even exist.

[00:02:03]
This is generally quite confusing behavior, which is one of the reasons they decided they would replace var with the let and const keywords instead. Another interesting thing about var is that it actually gets hoisted just like functions get hoisted while let and const don't get hoisted at all. So if we take a look at this code, you'll notice something really interesting. So we try to use this variable A before we define the variable.

[00:02:26]
Normally with let and const we would get an error, but instead it actually just prints out undefined for us instead as you can see on the right hand side of the screen, and that's because essentially when JavaScript sees that you create a variable with the var keyword, it does this instead. It first moves it to the very top of your file and removes the equals portion. It just defines a variable with a default value which we know is undefined.

[00:02:47]
Then wherever you normally create that variable, it essentially treats your code like you're redefining that variable. So JavaScript kind of magically moves this var variable to the top of your file with no value at all, so you can use it anywhere you want. This is what makes it really confusing to use these var keywords because if I go back to how my code was before, normally this should be something that should throw an error because I'm using my variable before it exists, but with that hoisting it actually allows me to use that, which is another reason why they replaced var with let and const.

[00:03:16]
Now the final thing that is even more confusing about var is it actually lets you redefine the variable by redeclaring it. Normally, if we have a variable and we want to redeclare it, you would just come in here and say A equals two, and now that gives a new value for A. And if we want to create a variable, you always start it with var. But with the var keyword here, we can actually just create a new variable called A, but all it actually does is overwrite the existing variable already called A.

[00:03:42]
So you can see here, now it's going to print out two to the screen, and I don't get any errors at all. If I were to use let to replace both of these, instead, immediately I'm going to get errors because I'm trying to redeclare a variable that already exists, but var just says if you're redeclaring me, I'll just overwrite the variable that already exists. Again, another reason why var is much more confusing to work with than something like let or const.

[00:04:04]
Because of these different reasons, I would recommend you pretty much never use the var keyword. The only places you're ever going to see it is if you're working in a codebase that was written before let and const because that was the only way to do var, or maybe you're watching a tutorial that has some older content inside of it, they may be using var because let and const weren't there. And then if you have a really particularly bad employer, they may ask you tricky interview questions related to how var behaves differently, even though nobody actually uses var anymore.

[00:04:31]
So those are pretty much the only times you'll see it, and again, I'd recommend just not using var inside your code. It's important to understand how it works because you may run into it in the wild with older code bases, but again, it's not something you're hopefully going to write on your own.