So your variables are scoped globally when they are not defined within curly braces. So let's define two variables here. Let's use let message equals hello. And when it comes to scope, let and const work the same. So I'll just define one let variable here. We'll also define one using var. So var greeting equals hi. And since these variables are not within curly braces, then they are global. So they should be accessible anywhere. So as expected, if I console.log message, and also greeting, that should show in the

that var is actually attached to the global window object. So there's a global window object. So if I type in a window, and it has a bunch of built-in methods and properties. So if I just expand this, you'll see all of the methods and properties. And one that we've already used is alert. So if you don't remember alert, we can say alert, and that should bring up the browser's native alert, hello. And you can also reference it using window.alert at the front. So window.alert. And if I enter here, that should show the alert.

So window. And if I enter here, that should show the alert. And you can see it behind our DevTools here. Okay. So let me bring up the window object again. And let me expand it one more time. So as I said, var variables are attached to the window object. So if we look for greeting here, it should show here. So let me just scroll down a bit to G, we can see greeting here, and you can see high for the value, but let and const variables are not.

so if true, now we have our curly braces. So this is a new block. But since these are global, these variables should still be accessible within this block. So if I console.log message again, and also our greeting, that should still work. If I say that we do get hello and hi twice. Now let's take a look at function scope. So let me just comment out everything here. And we'll grab these two variable declarations here. And let's define a new function. So let's say function sayHello.

And let's define a new function. So let's say function sayHello(). And let's define some variables in here. I'll just paste in my two variable declarations in here for let and var. And for function scope, both var and let variables are only available in the scope that they are declared. So in this case, they're only available within these two curly braces here. So as expected, if I were to console.log message and greeting within the function body, so within the curly braces, that should work. Save that.

within the curly braces, that should work. Save that. And it's not showing anything because we actually have to call the function here. So say hello. Okay. And we do get the console logs. But if we try to access these variables outside of these curly braces, then it will not work. So if I try to console.log message and greeting here, so let's just put that in here. Let's try that out. Save.

Let's try that out. Save. And we do get this error here. Message is not defined. And same for greeting. So let me just comment this out. We get the same thing. So again, for function scope, both for let and var. If you declare variables within the function body, then they are only available within that scope.

If you declare variables within the function body, then they are only available within that scope. So within the curly braces here. And if you want access to something outside of a function, you learn that you can use the return keyword to return something and then capture that in a variable outside of the function. So if this were to return the message, we can say return message here. And then we can save it outside of the function like this. So if we did let hello equals sayHello, and now hello should be message or hello as a value.

So let's define another function here, let's say nested. And it's console.log the message and the greeting again. Okay, so this new function has its own scope, but it's still within the scope of this function. So these two variables should still be available. So if I save that, we should get hello, hi, two times. And of course, we have to call the function, or we can call it here. And that should still work. And it does. Now let's take a look at block scope, which is similar to function scope. But using var has different results than using let or const.

Now let's take a look at block scope, which is similar to function scope. But using var has different results than using let or const. So again, let me comment everything out here. And let's scroll down to block scope. So technically functions are blocks as well. But things like ifs or loops are blocks of code. So we have if say true. We have our curly braces here. And it's to find the same variables here. So let me just grab that from up here.

And it's to find the same variables here. So let me just grab that from up here. You have message and greeting. Let's paste that in here. Okay. And let's also console.log them like we've been doing. So let me just grab this, paste that in here. Let's comment it back in. So I'm defining two variables here, one let and one var, and we're using it within the same scope.

So I'm defining two variables here, one let and one var, and we're using it within the same scope. So this should still work. We should get hello, hi. And we do. And now let's try using it outside of this block. So we'll console.log message first. Let's see what we get. Okay. So we get an error, message is not defined.

Okay. So we get an error, message is not defined. So this is the same behavior as our function scope for let and const. But let's try greeting here. Let's save that. As you can see, we are still getting the value for greeting, which is high. So if you use var variables within any blocks of code that are not functions, like if statements are here, then that value is still available outside of that block. Now this can lead to a lot of bugs and unexpected results and is one of the reasons they say you should always use const and let for your variables.

Now this can lead to a lot of bugs and unexpected results and is one of the reasons they say you should always use const and let for your variables. So let's take a look at one more example where it might be an issue. So again, let me just comment out everything here. And this time we'll use a for loop like we looked at in the last video. So we'll say for, and let's start with let variables like we did in the last video. So let i = 0. Our condition is i is less than 5. And let's increment i. Okay, and we'll just console.log i is i.

Also generally speaking, you want to avoid global scope as that can lead to many bugs and accidental overriding of variables. Now for the example I've been showing you, I think it's fine as we're just trying to learn here. But as you write more JavaScript, you want to avoid putting your variables in global scope. So let me show you one more example here. Let's comment this out. So say you accidentally used the variable name alert. And we already know alert is a built in function in JavaScript.

So say you accidentally used the variable name alert. And we already know alert is a built in function in JavaScript. So let's say const alert equals error. And now if we try to use alert here, it's not going to work because we're overriding the native alert in the browser. So if I try alert('high') here, let's see what we get. We get syntax error because I have an extra bracket. And now we get alert is not a function, because we're overriding it here. So again, if I comment this out, the alert should work, and it does in the background. But if I put this back, it's not going to work.

So again, if I comment this out, the alert should work, and it does in the background. But if I put this back, it's not going to work. Now one obvious solution would be not to use the alert name as a variable name, and that should be fine. And now the alert works, or you should just avoid the global scope entirely. And there are several ways to do that. Let me put that back to the alert variable name, we can put all of our logic within an object. And that would be fine. Let's say const myObject equals and we can put the alert directly in here as a key and

And that would be fine. Let's say const myObject equals and we can put the alert directly in here as a key and the value should be error. And now if we try alert here, that should still work. And we would reference our alert by saying myObject.alert. So we can say console.log(myObject.alert), okay. And let's get rid of this, say that this should not be a semicolon. And we do get error here, and we do get the alert here. Okay. Another option would be to use an iffy to scope our own variables.