JavaScript Scope Fundamentals
What is Scope?
Scope is a core concept in JavaScript that defines the accessibility and lifecycle of variables, functions, and objects. In simple terms, scope determines where variables are visible and accessible within the code.
JavaScript supports three main types of scope:
- Global Scope: Variables accessible from anywhere in the code.
- Function Scope: Variables defined within a function.
- Block Scope: Variables defined within a
{}code block (introduced in ES6).
// Global scope
var globalVar = 'I am global';
function myFunction() {
// Function scope
var functionVar = 'I am in function';
if (true) {
// Block scope (ES6)
let blockVar = 'I am in block';
console.log(blockVar); // Accessible
}
// console.log(blockVar); // Error: blockVar is not defined
}
myFunction();
console.log(globalVar); // Accessible
// console.log(functionVar); // Error: functionVar is not definedDetailed Explanation of Scope Types
Global Scope
Global scope is the outermost scope, accessible from any other scope. In a browser environment, the global scope is the window object.
// Global variable
var globalVariable = 'Global';
function checkGlobal() {
console.log(globalVariable); // Can access global variable
}
checkGlobal();
console.log(globalVariable); // AccessibleCharacteristics:
- Accessible everywhere.
- Overuse can lead to naming conflicts.
- Difficult to maintain and debug.
Function Scope
Function scope refers to variables defined within a function, accessible only inside that function.
function functionScopeExample() {
var functionVar = 'Function Scope';
if (true) {
var functionVar = 'Changed in block'; // var ignores block scope
console.log(functionVar); // 'Changed in block'
}
console.log(functionVar); // 'Changed in block', as var ignores block scope
}
functionScopeExample();
// console.log(functionVar); // Error: functionVar is not definedNote: Variables declared with var within a function scope are not constrained by block scope, which is a significant limitation of var.
Block Scope
ES6 introduced let and const, which provide block-level scope.
function blockScopeExample() {
let blockVar = 'Block Scope';
if (true) {
let blockVar = 'Changed in block'; // Different variable
console.log(blockVar); // 'Changed in block'
}
console.log(blockVar); // 'Block Scope', unaffected by inner block
}
blockScopeExample();
// console.log(blockVar); // Error: blockVar is not definedCharacteristics:
letandconstvariables are block-scoped.- Resolves issues with
var’s hoisting and pollution. - Aligns with intuitive scope rules.
Scope Lookup Rules
The JavaScript engine follows these rules when looking up variables:
- Search the current scope first.
- If not found, search the parent scope.
- Continue up the chain until the global scope is reached.
- If not found in the global scope, throw an error.
var globalVar = 'Global';
function outerFunction() {
var outerVar = 'Outer';
function innerFunction() {
var innerVar = 'Inner';
console.log(innerVar); // 'Inner', current scope
console.log(outerVar); // 'Outer', parent scope
console.log(globalVar); // 'Global', global scope
}
innerFunction();
// console.log(innerVar); // Error: innerVar is not defined
}
outerFunction();
// console.log(outerVar); // Error: outerVar is not defined
