00:00:00 It's not enough to understand the concept of scope just on a theoretical level.

00:00:05 You have to experiment and play with it a bit to truly understand it.

00:00:08 So I decided to take some extra time and record this workshop type lesson where we can just explore how JavaScript scope works within the code in a bit

00:00:19 more detail on a couple of examples.

00:00:22 First, let's explore the global scope.

00:00:25 See, if you create a variable in the global scope, like const global var, and you make it say something like, I am global,

00:00:37 then as we discussed before, if you create some kind of a function, either using the const declaration or just a regular function declaration,

00:00:46 const show global, and you try to console log that global variable right within it, Well, we know what's going to happen.

00:00:54 If you try to call it, you'll see that we immediately get access to it.

00:00:58 If you want to, you can also console log that variable just right here, in this global scope itself, by saying global var,

00:01:06 and then you're going to get two different console logs.

00:01:09 This works because global var is accessible both inside and outside of the showGlobal function, because it has been declared in the global scope.

00:01:18 Next, we have the function scope.

00:01:20 So right below, I'll say function scope, and I'll declare a function called something like myFunction.

00:01:29 Not the best function name, but bear with me.

00:01:32 And within it, I'll declare a new variable const function scoped var, and I'll make it say something like, I am inside the function.

00:01:43 Now, if you try to call it from inside of the function, so console.log function scoped var, and then you execute that function below by calling the my

00:01:55 function keyword, you'll see that we get, I am inside the function.

00:02:00 Let me also comment out the previous code, just so we understand what's happening below.

00:02:05 I am inside the function.

00:02:07 That is working well.

00:02:10 But then, if you try to call it outside of the function scope, just by saying const log function scoped var, we immediately get an uncaught reference error

00:02:22 saying function scope variable is not defined.

00:02:25 This happens because function scoped is only accessible within the function we declared it within.

00:02:32 So if the first was the global scope and the second was function scope, the third is very similar to the function scope and it is a block scope for the

00:02:44 let and const variables.

00:02:46 Letting const, as I explained before, have a block scope, which means that they can only be accessed from within the opening and closing curly brace that

00:02:56 they were declared in.

00:02:57 So if I open it up right here, which is something you will never do, but you can see it happening within if statements or loops.

00:03:05 And you declare some kind of a variable here like const block var and make it equal to im inside of the block.

00:03:15 And then you try to console log it within it.

00:03:17 Of course, this will work.

00:03:18 But as soon as you try to console log it outside of that block, you will once again get a reference error, which makes sense.

00:03:25 You cannot access it outside of where it has been declared.

00:03:29 A bit of a more detailed example of a function scope would be to have multiple scopes, one within another.

00:03:35 So I can create a function called func1 and declare it like this.

00:03:40 You can think of the space within it as scope number 1. Then, if I declare another function right within this function, and yes,

00:03:49 that is valid and legal in JavaScript, the space within those two curly braces will be scope2.

00:03:58 And you can continue going indefinitely like this.

00:04:01 But of course, what happens is that if you declare something right here, like a const within scope1 equal to scope1, and you try to console log it right

00:04:14 here within scope1, of course, that will work.

00:04:18 So if you go ahead and call the func1, You can access it, but then here's the cool part.

00:04:24 If you try to call the same within scope one variable within the function two right here, but of course, don't forget to actually execute it.

00:04:35 So we can try calling the function two.

00:04:38 Will this work?

00:04:40 Well, not really.

00:04:42 Because of the concept of scope, you cannot immediately call the function that has been declared within another function.

00:04:50 Because functions are like variables.

00:04:53 Depending on where you declare them, you can only call them there.

00:04:57 So first, we have to call the function 1, which has been declared in the global scope, and then from within function 1, we can call the function 2, because

00:05:06 it has been declared within scope 1. But now, here's the key part.

00:05:10 Do you think that function 2 that has scope 2 will have access to a variable within scope 1? The answer is yes.

00:05:19 You can see that it's successfully console logging it right here.

00:05:23 And why is that?

00:05:24 Well, it's because scope1 is the parent scope of function2 and scope2.

00:05:31 So while you can access global variables from everywhere, in the same way, you can access parent variables from within children's scopes,

00:05:40 but not vice versa.

00:05:42 So if you declare a variable const within scope2 and make it equal to scope2, and you try to call it within scope1, like this,

00:05:53 of course that will not work because scope1 is the parent to the scope2.

00:05:59 and parents don't have access to its children's scopes.

00:06:03 This was a more difficult example, but hopefully it makes sense.

00:06:08 So to sum it up, globally scoped variables are accessible everywhere.

00:06:12 Function scope variables exist only within that function, or as you saw, within functions that are within that function,

00:06:20 so all the children functions, And the same things happened with and block scoped variables with let and const are limited to the code block that they

00:06:29 were declared within.

00:06:31 Hopefully this little workshop gave you some more examples of how the scope works and different practical use cases where you can see that understanding

00:06:41 scope truly does matter.

00:06:43 If you like how I took this extra time to go a bit deeper into practicality of the concept of scope and not just covering theory,

00:06:50 and if it clicked for you, let me know by leaving a positive Trustpiler review about your experience with the course so far.

00:06:57 It means a lot.

00:06:58 Now, let's move on to hoisting.