5.1 Global Scope
Scopes define the accessibility of variables and functions in different parts of a program. In JavaScript, there are three main types of scopes: global, local, and block. Understanding these scopes is key for effective data management and avoiding bugs in your code.
Global scope includes all variables and functions declared outside of any functions or code blocks. These variables and functions are accessible from anywhere in the code.
Example 1: Declaring Global Variables
var globalVar = 'I am a global variable';
function showGlobalVar() {
console.log(globalVar); // Access to global variable
}
showGlobalVar(); // Outputs: I am a global variable
console.log(globalVar); // Access to global variable
Example 2: Global Functions
In this example, the variable globalVar and the function globalFunction() are declared in the global
scope and are accessible from anywhere in the code.
function globalFunction() {
return 'I am a global function';
}
console.log(globalFunction()); // Outputs: I am a global function
5.2 Local Scope
Local scope includes variables and functions declared inside a function. These variables and functions are only accessible within that function and unavailable outside of it.
Example 3: Declaring Local Variables
In this example, the variable localVar is declared inside the function localScopeExample() and is unavailable outside this function:
function localScopeExample() {
var localVar = 'I am a local variable';
console.log(localVar); // Access to local variable
}
localScopeExample(); // Outputs: I am a local variable
console.log(localVar); // Error: localVar is not defined
Example 4: Local Functions
In this example, the function innerFunction() is declared inside the function outerFunction() and
is unavailable outside of outerFunction():
function outerFunction() {
function innerFunction() {
return 'I am a local function';
}
console.log(innerFunction()); // Access to local function
}
outerFunction(); // Outputs: I am a local function
console.log(innerFunction()); // Error: innerFunction is not defined
5.3 Block Scope
Block scope includes variables declared using let and const within a code block, enclosed by curly brackets {}. These variables are accessible only within that block and not outside of it.
Example 5: Declaring Variables with let
In this example, the variable blockVar is declared inside an if block and is unavailable outside of it:
if (true) {
let blockVar = 'I am a block-scoped variable';
console.log(blockVar); // Access to block variable
}
console.log(blockVar); // Error: blockVar is not defined
Example 6: Declaring Variables with const
In this example, the variable i is declared inside a for block and is unavailable outside of it:
for (const i = 0; i < 3; i++) {
console.log(i); // Access to block variable
}
console.log(i); // Error: i is not defined
Features of Block Scope
Example 7: Nested Blocks
In this example, the variable innerVar is only accessible within the inner block, while the variable outerVar is accessible in both the outer and inner blocks:
if (true) {
let outerVar = 'I am in the outer block';
if (true) {
let innerVar = 'I am in the inner block';
console.log(outerVar); // Access to outer block variable
console.log(innerVar); // Access to inner block variable
}
console.log(outerVar); // Access to outer block variable
console.log(innerVar); // Error: innerVar is not defined
}
5.4 Interaction of Different Scopes
Example 8: Interaction of Global and Local Scopes
In this example, the function scopeExample() has access to the global variable globalVar and its own local variable localVar:
var globalVar = 'I am a global variable';
function scopeExample() {
var localVar = 'I am a local variable';
console.log(globalVar); // Access to global variable
console.log(localVar); // Access to local variable
}
scopeExample(); // Outputs: I am a global variable
// I am a local variable
console.log(globalVar); // Access to global variable
console.log(localVar); // Error: localVar is not defined
Example 9: Scopes with Arrow Function
In this example, the arrow function arrowFunction() has access to the global variable globalVar and its own local variable localVar:
let globalVar = 'I am a global variable';
const arrowFunction = () => {
let localVar = 'I am a local variable in arrow function';
console.log(globalVar); // Access to global variable
console.log(localVar); // Access to local variable
};
arrowFunction(); // Outputs: I am a global variable
// I am a local variable in arrow function
console.log(globalVar); // Access to global variable
console.log(localVar); // Error: localVar is not defined
GO TO FULL VERSION