A scope defines the lifetime visibility of a variable. Variables are not visible outside the scope in which they are declared.
Types of Scope in JavaScript
- Module Scope
- Function Scope
- Block Scope
- Lexical Scope
- Global Scope
Module Scope
A variable declared outside any function fall in the global scope. In a module, when a variable is declared, it is hidden and not available to other modules unless it's exported.
// A random no. between 1 -100
const randomNumber = Math.floor(Math.random() * 100);
//This variable is not exported
const alpha = 432;
// Look carefully as Variable alpha is not exported.
// ES5 Export Statement
module.exports = randomNumber;
Filename = ModuleOne.js
// ES5 Import Statement
const moduleTwo = require("./moduleTwo")
console.log(moduleTwo)
// 44
Only the exported variables are logged into the console. The variables which are not exported remain inaccessible for the ModouleOne.js unless explicitly exported from ModuleTwo.js
Function Scope
Variables and Parameters declared inside a function are accessible inside the function but not outside the function.
function scoped(number) {
const incrementedNumber = number + 4;
console.log(number);
//42
console.log(incrementedNumber);
// 46
}
scoped(42);
console.log(number)
// ReferenceError: number is not defined
The variable number and incrementedNumber
are functions scoped and thus they throw an error when someone tries to access them.
Block Scope
Block Scope is defined with curly braces. It is separated by { and }
.
// Oustside Block
let x = 55;
{
// Inside Block
let x = 33;
console.log("Inside Block: ", x)
}
console.log("Outside Block: ",x)
// Inside Block: 33
// Outside Blocl: 55
Lexical Scope
Lexical Scope means that in a nested group (function within a function) of function, the inner functions have to access to the variables and other resources of their parent scope.
This means that the child functions are lexically bound to the execution context of their parents. Lexical scope is sometimes also referred to as Static Scope.
function outer() {
let a = 323;
function inner() {
console.log(a);
}
inner()
}
outer();
// 323
First off, JavaScript has lexical scoping with function scope. In other words, even though JavaScript looks like it should have block scope because it uses curly braces { }, a new scope is created only when you create a new function.
Even though there are no variables names an inside of an inner function, the inner function doesn't throw an error.
The inner function looks for an in its scope but there is no variable there. So, it looks for an in the outer function.
Global Scope
Variables defined outside any function, block, or module scope have global scope. Variables in the global scope can be accessed from everywhere on the application.
var x = 33;
function func() {
// Function Scope
consolelog(x)
function inner() {
//Lexical Scope
console.log(x)
}
inner();
}
func();
{
// Block Scope
console.log(x)
}
// 33
// 33
// 33
π Thank For Reading | Happy Coding β‘
Top comments (3)
Nice !!!
Suggestion : let is misspelled as ket in block scope snippet.
Thank You so much . I'm using my phone to blog so it just becomes hard.
Nicely Explained. :)
Keep coding, keep growing.! βοΈ