The concept of scope is crucial for controlling the availability of variables. The concept of global and local variables is defined by the scope, which is at the base of closures. The accessibility of variables, objects, and methods is defined by scope in Javascript.
Types of Scopes
- Global scope
- Block scope
- Function scope
Global Scope
Globally declared variables have a scope that extends outside of any function. In a Javascript program, global variables can be accessed from anywhere. When defined outside of a block, variables declared using var, let, and const are quite similar to one another. A global variable refers to a variable declared within the global scope. Any scope can access global variables.
Ex:
1 2 3 4 5 6 7 8 9 10 11 | <script> let globalLet = "This is a global variable"; function fun() { let localLet = "This is a local variable"; console.log(globalLet); // This is a global variable console.log(localLet); // This is a local variable } fun(); </script> |
Output:
1 2 | This is a global variable This is a local variable |
Note:
In a browser environment, the topmost scope of the Javascript record loaded using the <script> tag is a global scope.
Block Scope
The variables which are declared inside the { } block are known as block-scoped variables. variables declared by the var keyword cannot be block-scoped.
Ex:
1 2 3 4 5 6 7 8 | { let num = 10; // calling the function inside block console.log(num) } // calling the function outside // block throws a Error console.log(num) |
Output:
1 2 | 10 Uncaught ReferenceError: num is not defined |
Related Post
Function Scope
A new scope is created by each function in Javascript. A function’s declared variables cannot be accessed or seen from outside the function. When declared inside a function, variables declared using var, let, and const are quite similar to one another.
Ex:
1 2 3 4 5 6 | function fun() { let num = 10; console.log(num); } fun(); // calling the function console.log(num); |
Output:
1 2 | 10 "ReferenceError: num is not defined |
Concept of Closure
Scopes Can be Nested
The ability of scopes to nest is an exciting feature.
Ex:
1 2 3 4 5 6 7 8 9 10 11 | function name_function() { // "name_function" function scope const text_message = 'My name is Shivam Singla'; if (true) { // "if" code block scope const another_message = 'My name is Sachin Singla'; console.log(text_message); // 'My name is Shivam Singla' } console.log(another_message); // throws ReferenceError } name_function(); |
Lexical Scope
Lexical scoping is a scoping method that JavaScript uses (or static scoping). By using lexical scoping, variables are accessible to the inner function scope and inaccessible to the outer function scope based on their relative positions inside the nested function scopes.
Ex:
1 2 3 4 5 6 7 8 9 10 11 | function function_1() { // the outer scope let function_1_variable = 'I am from function 1!'; function function_2() { // the inner scope console.log(function_1_variable); // 'I am from function 1!' } return function_2; } const inner = function_1(); inner(); |
Variables Isolation
A scope’s immediate characteristic is that it isolates the variables. It’s also advantageous because variables with the same name can exist in various scopes.
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 | function name_function() { // "name_function" function scope let name = "Shivam Singla"; console.log(count); // "Shivam Singla" } function school_function() { // "school_function" function scope let name = "NSUT OPJMS"; console.log(count); // "NSUT OPJMS" } name_function(); school_function(); |
