Understanding the basics of the scopes in Javascript. Solving the confusing part.
Scopes in Javascript are very simple to understand yet when we execute the code they become the main culprit because sometimes we expect a different result and get a different output. And while debugging we keep scratching our head to find the bug but we don’t get one, this is because there is no error in code but the behavior of the variables. Let’s understand the basic part.
What is Scope?
Scope points to the current context of execution. It is the environment where variables are stored. It determines where in your program a variable is available or not. If a variable is not in that scope then we can not use that variable in our code.
Types of Scope?
Scopes are mainly of two types.
- Global Scope
- Local Scope
Global Scope: Items in the global scope can be accessed from anywhere from the code.
Local Scope: Items in local scope are accessible only from that block of code depending on which keyword we are using to declare our variable.
Global scope remains as long as your application lives while local scope remains there as long as your functions are called and executed.
Further breakdown of Scope:
Function Scope: Variables that create a local scope inside a function are known as function scoped. They can only be accessed from inside a function. Variables declared with ‘var’ are function scoped.
If a variable is declared inside a function with the ‘var’ keyword then it can not be accessed from outside the function.
Block Scope: Variables that create a local scope inside curly braces ( {} )are known as Block scoped. They can only be accessed from inside that block.
Variables declared with ‘let’ and ‘const’ create block scope. If a variable is declared inside {} with ‘var’ and ‘const ’ keywords then it can not be accessed from outside the block. But a variable declared with ‘var’ will not follow a block scope, it will follow either global scope or function scope depending on where it is declared.
The concept of block scope was introduced from ES6 with the introduction of ‘var’ and ‘const’.Functions are also block scoped.
Lexical scoping
Each scope has access to its parent’s scope. This is called variable lookup, when a variable is not present in the local scope then it will search it in the parent scope but not vice-versa. The Outer scope does not have the access to the inner scope.
Variables are not copied inside the child scope but a variable lookup is performed walking up in the parent’s scope. So if we reassign a value to a variable from a parent scope inside child scope then the value of the variable for parent scope is also changed as we are not copying the variable but referencing that value.
Conclusion
- Scope is the environment where variables are stored.
- There are two types of scope global and local.
- Global scoped variables can be accessed from anywhere in the code.
- Locally scoped variables can be accessed only from that block of code where it is declared.
- ‘var’ creates function scope while ‘let’ and ‘const’ create block scope.
- Each scope can access variables of its parent scope but vice-versa is not possible.
