The Ultimate Guide To Understand JavaScript Scope.
In this article, you will understand the Block, Local, Function, and Global scopes in detail.
As a beginner in programming, you will encounter errors in your program because of scopes.
Understanding the JavaScript scopes is the important thing to avoid weird bugs or errors in your code.
The scopes control the visibility of the variables used in your code, and they add an extra layer of security to the variables from accessing the block from outside.
There are four types of scopes in JavaScript.
- Block Scope
- Local Scope
- Function Scope
- Global Scope
— → Block Scope :
In the newer version of JavaScript(ES6) the two new keywords let and const are introduced.
The let and const keywords came with the new concept that is Block scope. Variables defined with var keyword don’t have Block scope.
Block scope is like the boundary connected to the variables given by the JavaScript engine itself. If the variable is called from the outside of the scope boundary, then the variable cannot be accessed.
Example :
— → Local Scope :
The variable declared in between opening {and closing} braces are said to be local to that block. Variables can be declared using let, const, and var keywords inside the local scope.
Local variables can only be accessed and modified inside the prior to the local scope.
Example :
If you declared a variable in the function, the variable is only available in the scope when the function is called and deleted when the function is finished its work.
— → Function Scope :
When we write a function, then the JavaScript engine automatically assigns an invisible scope to the function.
In this function scope when the variables are declared using let, const, and var then these variables cannot be accessed from outside the function’s scope.
Example :
The function variables have less span of life as compared to global variables.
— → Global Scope :
The Global scope is nothing but the scope in which the variable is declared outside the function’s body, then that variable is said to be global.
The variable declared outside the function but to the top of the program can have permission to be available all over the program.
JavaScript engine automatically assigns scope to the Global variables.
Example :
As long as the web page is loaded in the browser the global variables stay if the web page is closed or reloaded the global variables will be destroyed.
Conclusion :
Now you understood how to control your variables from accessing outside the scope. The scopes are not easy to understand for beginners but are very important concepts in any programming language.
Using global variables everywhere in your code is not good practice, only use global if you need it otherwise use locally. The global and local scope have their own benefits in your code.
Hopefully, this article helped you to learn different types of scopes in JavaScript.
If you enjoyed this post, then feel free to clap, comment, and share with your friends. Don’t forget to follow me for more interesting articles.
Thank you for reading!
