JavaScript Lexical Scope
Lexical Scope
As you may have heard, in javascript we have a very important but basic concept called Lexical Scope which refers to the variable declaration and how we can access them through our code, if you want to master more advanced concepts like closures or caching and garbage collectors, etc you definitely need to know scopes in javascript very well!
Let’s get down to business, we have two main scopes in javascript:
1- Global Scope
2- Local Scope
We also can divide the local scope into two different scopes:
1- Function Scope
2- Block Scope
Now how are we going to define them? what are the differences? and more questions ahead so I am sure you would like to see this in the code without further ado.
If you take a look at the above picture, I separated all the codes referred to all kinds of scopes and called them to see the results.
If you take a look at the results you will see that inside the global scope everything is going as we expect it to but if we get inside the function scope and inside it a block scope, we declared 3 variables with var, let, and const which are the only ways to declare a variable in javascript.
As you can see I declared variables of a, b, and c in the sample function and also the same thing with the block inside the function, guess what? in the function scope, the only thing that is changed is the variable a which is a var declared variable but the let and const variables are showing their own results from their own scopes but var has changed in the function scope since we have re-declared it inside the block scope!
Accessing a variable from a different scope is called lexical scope.
Now that you got a good sense of what is going on in the code, we can have some definitions around those scopes.
1- Global Scope: The most upper scope in your code that is not a function or block scope.
2- Local Scope: Every function or block inside your code has its own local scope.
So now how are we going to explain the var difference with const and let around their scopes? well, we can say that var is a functional scoped variable that sticks to its first upper function’s scope in the hoisting process before the execution of javascript code but let and const are block-scoped variables that stick to their first upper block.
That is why if you re-declaring a var in a function it will change but if we re-declaring let and const inside a block it won’t affect the upper block or function because it is not gonna look up after it finds its first near upper block scope.
Conclusion:
One of the reasons that we should always avoid using var is the reason we achieved above, the Global Scope variable is not desirable in JavaScript!
It can be really tough to debug your code if you face bugs injected in your code using var declarations because it can affect your code and also it can be declared multiple times across your code, something impossible using let and const because it will throw a syntax error.
Use const unless you want to re-assign the variable through your code because although let is a blocked scope variable, it can be re-assigned along with your javascript code and if you don’t need that, it can lead to bugs in the future.
