Variables in JavaScript used to consist of just one declaration, var. Now though, they're split up into two: let and const. And actually, before we continue, I'm going to take this script and put it into a separate file in our project. We'll just call it main.js. And right now we just have a variable name is equal to Andrew. Let's make that change in our HTML. And don't forget 'use strict' at the top here. Now the biggest difference that came with this change, besides just the naming convention, was how these variables are scoped. So before using var, it's scoped to the function level in JavaScript, which means that if we create a function called init, and then inside here we have some conditional, we'll create one that just always returns true. If we create a variable in here

called like init, and then inside here we have some conditional, we'll create one that just always returns true. If we create a variable in here and then output it after the conditional, let's say that we get our outputElement and just add it to the innerHTML so we can see that in the browser. Now running this, we should expect to see that email show up. And we do. And the reason for this is because this variable using var is scoped to the function itself. But that changes with let and const. They're instead what's called block scoped, which means they are scoped to individual blocks of code in JavaScript. And a block is defined as basically anything that's between two sets of brackets. So if we did the same thing, let's comment this out and instead create let email equals Andrew@example.com. If we head into our browser, we see nothing shows up. And in the

brackets. So if we did the same thing, let's comment this out and instead create let email equals Andrew at example.com. If we head into our browser, we see nothing shows up. And in the console, we actually have an error that the variable is not defined. And that's because it was limited to this block of code here and is not accessible outside of that. Instead, though, we could just copy this underneath of this. And it works as expected. hoisting also works differently between var and let and const. So for instance, let's comment all of this out here. uncomment this. And if we create a variable underneath of this, we should see it at least appear in the browser and not give any kind of error in the console. And there we go. It's undefined, but it does exist. And there's no errors in the console. Because what's happening is that JavaScript takes these variable declarations and basically puts

And there we go. It's undefined, but it does exist. And there's no errors in the console. Because what's happening is that JavaScript takes these variable declarations and basically puts them at the top of the code as undefined. The code expects there to be a variable set with the name email, but it doesn't have a defined value until we give it one at this line of code. So by referencing email up here, it is referencing a variable that is set but has no defined value. But if we swap this out with let, we get a notice that the browser cannot access email before initialization. And it's the same for const. Both of them are not hoisted in the same way that var is. One other big change between these, let's get rid of this line here. And at the end of this line, instead of email, let's get rid of const. And at the end of this line, instead of email, let's use that name variable that we set up top.

And at the end of this line, instead of email, let's get rid of const. And at the end of this line, instead of email, let's use that name variable that we set up top. For some reason, my ID is kicking an error. So let's call this username. Okay, so we're using this variable that we've set in the top of the scope here. Now if we go to our browser, we obviously see the variable being set here, which is expected. But if we open up the console, and we use the global window object, if we type in username here, we see that there is an attribute set to this window object called username. And that's because any variable at the top scope here automatically sets a property on that global object. However, let and const do not. Instead, you have to specify that by using the window object. Okay, so we know the difference between var and let and const. But what about the difference

the entire value of the variable. So instead, let's say that username was an object that consisted of a name and an email. Now what we could do instead is change a property on that object. And that will work just fine. So if we go down here and we change that username to spit out the properties of that username, we don't get any error back in the console, and we're seeing our modified values in the browser. And that's the only really big difference. You see if this was a let instead, and we replace changing those attributes with modifying the entire value as a whole. And that's the only really big difference. You see if this was a let instead, and we replace changing those attributes with modifying the entire value as a whole. And that's the only really big difference. Again this goes through just fine, no errors in the console, because we're using let