JavaScript Scope
1. Scope Introduction
Scope in JavaScript refers to the accessibility or visibility of variables and functions
in different parts of the code during the execution. It defines the context in which
variables and functions are declared and accessed. The scope determines where a
variable can be used and modified.
• Global Scope: Variables declared outside any function or block are
considered global and accessible throughout the entire code.
• Local Scope: Variables declared within a function are only accessible within
that function and are not available outside.
• Block Scope: Variables declared inside a block (like within a loop or an if
statement) are only accessible within that block.
2. Scope in JavaScript
JavaScript uses different types of scope, including global and function scope, but
with ES6, block-level scope was introduced. The concept of scope is critical in
understanding how variables are accessed and how closures work.
Types of Scope:
• Global Scope: Variables declared outside of any function or block are in the
global scope. They are accessible from anywhere in the JavaScript code.
Example:
let globalVar = 'I am global';
function accessGlobal() {
[Link](globalVar); // Can access global variable
}
accessGlobal();
[Link](globalVar); // Accessible here too
• Function Scope: Variables declared inside a function are local to that
function and cannot be accessed from outside.
Example:
function myFunction() {
let localVar = 'I am local';
[Link](localVar); // Works here
}
[Link](localVar); // Error: localVar is not defined
• Block Scope (introduced with ES6): Variables declared with let or const
inside a block (e.g., a loop or if statement) are scoped to that block.
Example:
if (true) {
let blockVar = 'I am block-scoped';
[Link](blockVar); // Accessible inside block
}
[Link](blockVar); // Error: blockVar is not defined
• Lexical Scope: Lexical scope (or static scope) refers to the way JavaScript
determines the scope of a variable at the time of code writing (i.e., during
compilation), not during runtime. This means that the scope of a variable is
determined by its position in the source code.
• Explanation: In lexical scoping, a function can access variables defined in its
outer (enclosing) scope, but it cannot access variables from a function that
is defined inside it (inner scope).
Example:
function outer() {
let outerVar = 'I am outer';
function inner() {
[Link](outerVar); // Can access outerVar due to lexical scoping
}
inner();
}
outer();
• Closure: Lexical scoping enables closures, which are functions that retain
access to variables from their enclosing scope even after the outer function
has finished execution.
Example:
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
[Link](counter()); // 1
[Link](counter()); // 2
• Module Scope (ES6 Modules) With the introduction of ES6 modules, a
new scope was added, known as module scope. This scope is specific to the
file/module in which variables are declared.
• Module Scope:
• Variables declared within a module are not accessible globally.
• Variables, functions, or classes declared inside a module are
scoped to that module unless explicitly exported.
Example ([Link]):
let moduleVar = 'I am module scoped';
export function accessModuleVar() {
[Link](moduleVar); // Works within this module
}
• Importing and Exporting: You can export variables, functions, or classes
from a module and import them into other modules, maintaining scope
isolation.
Example of exporting:
export let myModuleVar = 'Module Variable';
export function moduleFunction() {
[Link](myModuleVar);
}
Example of importing:
import { myModuleVar, moduleFunction } from './[Link]';
[Link](myModuleVar); // Accessible after importing
Summary of Scopes in JavaScript:
• Global Scope: Available throughout the entire program.
• Function Scope: Available only within the function where the variable is
declared.
• Block Scope: Available only within the block (for let and const).
• Lexical Scope: Determined by the placement of the code during
compilation, allowing inner functions to access outer scope variables.
• Module Scope: Available only within the module and can be exported and
imported to/from other modules.
