Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Scope Practical Workshop
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.