Understanding Scope in JavaScript | CodeSketched

In this video, we look into an important concept related to the JavaScript engine. We explore how the engine defines and resolves variables. This concept becomes as a building block for other more complex concepts like Closures.
Hello and welcome to comscience simplified.
Today, we look into an important concept in javascript that not only helps us understand how variables are accessed by the engine, but also help us understand more complex concepts like closures which will help in our next JavaScript interview
Let’s begin.
According to MDN, the scope is the current context of execution. It is the area in which the values are currently visible or accessible to the engine. The variables not in the current scope cannot be accessed, although there is a caveat.
There are mainly three types of scopes that we come across in our day-to-day use of the language. Let’s look at them one by one.
The first one is the global scope.
Whenever we place any piece of code that is not inside of any function, it is said to be in the global scope by default. Here’s an example.
In this code snippet, this variable global and this function are both in the global scope. What this means is that we can access their values from anywhere inside of the code and we’ll be able to do that successfully. For instance, notice the inner function that is defined inside of the function in the global scope. We are able to easily access the value of global inside of it too.
Next, we have the function scope. This means that variables that are declared within a function are only accessible inside of that function but not outside of it.
Continuing with the previous example. If we define a variable inside of the inner function and then try to access it anywhere outside of that function, we get an error. That is because, as the variable was declared inside of the inner function, its scope is limited to the boundaries of that function. And to the engine, it is as good as the variable does not exist, outside of that function.
Now, let’s look at the third kind of scope that exists, which is block scope. This is a special type of scope which applies to variables that are declared using the let or the const keyword only.
According to the rules of block scope, variables that are declared inside of a block or a pair of braces can only be accessed inside of that block and nowhere outside of it. Let’s understand this with an example.
In this example, we are just creating a new variable called blocked using the “let” keyword inside of the if block. When we try to log that variable towards the end of the function, we get a reference error even though we are trying to reference the variable inside the same function. This is because it was declared using the let keyword and hence is scoped to the block. Due to that, it does not exist anywhere outside of the block.
If we declare the same variable using the var keyword instead of the let keyword, the code starts to function as expected because it is then scoped to the entire function and not the block.
Let us now discuss the caveat which we talked about. But before that, If you learned something new today, click that like button so that youtube knows this video is useful.
It might be clear from what we discussed just now, but we want to state it here again that a variable declared in a particular scope is available for access in all the inner scopes. For instance, the variable outer declared in the outer function here can be logged inside of the inner function because it is technically inside of the scope of the outer function.
This is possible because, when the Javascript compiler is unable to resolve a variable in the current scope, it keeps moving up into the outer scopes step by step and tries to find the said variable. This is called the scope chain. It does this all the way up to the global scope and if the variable is still not resolved, then we get the error that the variable is not defined. This means even if this variable was defined somewhere higher up, like in the global scope, we would still not get this error. But if it was not present anywhere throughout the scope chain, only then do we get this error.
And those are the basics about scope in JavaScript. See you in the next one where we cover the concept of closures in JavaScript.
Check out our other popular videos:
1. Learn about public-key cryptography
• encryption explained |...
2. maximum substring in a string (Google interview question)
• Google Interview Quest...
3. How the javascript engine works?
• How the Javascript eng...
4. Real time median in a stream, another google interview question
• Median in a stream | p...
5. Understand the Javascript event loop
• Javascript event loop ...
6. Understand Promises in javascript
• JavaScript promises | ...
7. Git basics you must know
• Git basics | 8 command...

[@Aaron-sy5yx]

Beautifully explained

[@szpaklabs8893]

great video, very useful even for non-beginners

[@yadusolparterre]

Good vid but why the hell would you mention var in 2022?

[@Aaron-sy5yx]

If you want thr variable to escape the block scope?