 If you always define JavaScript variables using the var keyword, in this episode I'm going to introduce you to let and const the cleaner way to define variables. I think that's a great topic because if you look at older code you see var everywhere, but now I see more and more use of let and const. And I think it may confuse people, they may not really know the difference. And it would be good to really understand what, why is this cleaner, a cleaner approach to define variables? Yep, it's cleaner and it has some different properties. So that's a great segue. Cool. So what we did here is sort of define the three kinds of keywords that you can use to define a variable. So var we've had forever, they have either global or function scope. And we're going to, when we get to the demo, you'll see what the difference of those two things are. But essentially they can be scoped globally throughout the browser, the window, the global object, or the browser page, or function, meaning that you define them inside of the function, and then they're only available inside that function. And can I just throw in a question here, because just in case people don't know what scope means in this, it doesn't refer to a mouthwash or anything like that, right? It's not minty. No, it's not minty. What do you mean when you say scope? It means when you define that variable, where you can reference it and that it exists for you. Got it. Yeah, so in our code we'll show when the variable exists and when it doesn't, based on the scope it was defined in. So if it's in scope, you can get to it if it's out of scope. It's hidden from it. Exactly, exactly. And so one of the weird oddities with var, and I almost hesitated to bring this up, but it doesn't need to be declared before you use it. And so what that kind of means is that you can literally say i equals 1, and then declare it var equals i later, and it will have that value of 1 that you defined it with. And that's actually that third point there. It can be redeclared, but it doesn't lose its value. So if you say, even if you said var i equals 1 at the top, and then later said var i technically, or the way you might think that would behave, is that i would be undefined, but it's not. It has the value that it originally got assigned, and that can really, really mess you up. I mean, if you said var equals i at the top, and then later said var i equals 2, now i, anywhere you find it, is going to have the value of 2, because you've essentially reassigned it. Right, it sounds like a lot of this cleanliness thing is dealing with bugs that come from reusing a variable name. It does, it absolutely does. Yeah, which could happen a lot with a variable like i, but I like reading short code like that. Right. You know, if it's a short little loop, I should be able to use i. Exactly, exactly. So in, walk, let, and const, and they've been around for quite a while, and they are both what's called block scoped, and so we'll see what that means when we get into our demo, but essentially it's a more narrow scope where the variable exists. And so in both the lat and const cases, they've sort of fixed that issue of, you have to declare that variable before it can be used. So even if you're halfway down your function, or whatever, when you declare that variable, it's only available below where it was declared. So that's important. Kind of like most languages are like that. Exactly. So it just puts some more formality around something that was a little odd around how var worked. In the case of let, it can be redeclared, and so you can re-declare it in another spot. A const cannot be re-declared. So, you know, you can start over essentially with declaring that same variable name over again. With let, also, you can reassign it. So if you say like a for loop, you use that example. So you could say for i equals zero, and you could then change the value of i during the loop. So that's that reassignment that can get a new value. And that's like a number or a string or anything like that can be reassigned. What's interesting about const is that it can't be reassigned, but the items within it, depending on what it is, can be. So like if you've declared a const variable that's an array, then you can change the elements inside of the array. And the same with objects. So if the const variable that you defined is an object of some sort, you can change the properties inside of the object. So those are very important things. That kind of makes sense in a way. It does. It's sort of by the old by reference, by value thing. So if it's a value, the value is fixed. But then if it's a reference to a container of some kind, it's just like I do this with Amazon boxes all day long, right? I reuse them for different things. So why not put something different in the array? Exactly. Awesome analogy. All right. So let's look at the demo. Cool. Okay. So here we are. And we're going to look at first the global variable scope. So by this, I mean that we've got, I've got some HTML that's going to allow us to render, but we really only need to see the JavaScript. So this is more just to give us a result so we can see what is actually happening. But let's go check out the JavaScript. So what we're doing here is we're declaring things globally, but we're going to use each one of the keywords and see how what the result is. So we're using the var keyword for a global variable and the let keyword and the const keyword. And we're just going to see what happens when we have an iffy function and what happens with those three variables. So the result is sort of what you expect. We've defined them globally. They are all available globally inside even of that, that iffy function, it's still available because it was defined globally. And so we have those values. Now let's look a second example. All right, so we have some HTML. Again, we've just got now two containers here because we're going to look at the function scope and what a function scope has as a result. So let's look at that index.js again. So we've still got our global variables, but now we're going to define a function inside of our iffy. We're calling it the function scope example. And then we'll execute the functions so that we can declare those variables and set the result of one of our elements. So we have the global result element and the function result element. And we're going to assign the inner HTML to the global values and the function values. And then at the end, we'll assign the global results element with the inner HTML of what all those things are so we can see what's happening. Cool. All right, so now if we look at the result, we have the block of function results and exactly what we expected. We have access to our global variables that we define and we also have the function variables that we define. What's then interesting is if we're look from outside of the function and try to access those function variables that we define, the var, the let, the const, they're all undefined here because they are scoped to that function. And so for the let and the const, they're block scoped, i.e. the function, but the var2 is function scoped, which is something that we said it could do when we were defining the different kinds of things. Got it. All right. So let's look at the third example. Okay, so for our third example, we have three containers. We have the block result, the function result, and the global result. And so again, let's go to the index.js and we've got our three global variables we define. Now we have an iffy. We're making three elements that we can write HTML to so we can see what the values are. We have a global result, a function result, and a block result. We have that function scope again. So we have a function that we're going to instantiate, but in addition, we've added a block scope. So this if statement here, which I'm just effectively bypassing any test, I'm saying it's true so it functions, we're going to define some block scope variables and then we're going to write them out. And then we have the function result after the block where we're going to write the function scope out. And then last but not least, we're going to write the global scope out. So let's take a look at what that looks like. So the block scope, again, exactly what we expected. We have access to the block variables that we defined in the block. We have access to the function variables that got defined outside of the block but inside of the function. And of course, those global variables. Then we have the function variables where we're trying to see what we have access to. And because the block variable we did var block, blocks aren't a scope for a var. So we have access outside of the block to the var value but the lat and const are undefined because we don't have access to them because they're block scope. And then similarly with the global results, we have access to none of them. And that totally makes sense. That's great. And I can see how this does make things cleaner. I mean, TypeScript allows for a lot of type checking of every little thing in the TypeScript compiler. But if you aren't using TypeScript or even if you are, this at least gets you to check that your variable has been declared correctly, that you're accessing the copy of the variable that you think you are. And just even simple little things like allowing you to put an if statement or a for loop that has some stuff contained in it and isn't going to go messing with some other variable on the page. Yeah, I think that's the big issue here, right? Is just simply that you can step on yourself without realizing you're doing it. And so by using the lat and const key words, you're really helping keep yourself from making accidental mistakes just because code can get complicated. A simple code, of course, probably doesn't matter. You probably are not going to have that problem. But once code starts to get complicated with a lot of function scopes and block scopes, not using those key words can put you in a situation where you're going to create mistakes in your code unintentionally. Great. Well, thanks for going over this. I think it will be helpful for a lot of folks. And for you folks out there, if you enjoyed this video, please give it a like. Love it if you subscribe to the channel so that you'll be notified of future episodes of Browser Native. Thanks for watching.