JavaScript Scope:
JavaScript has two types of scope: global scope and local scope. The scope defines the visibility of variables and functions in your code. Understanding scope is crucial for writing clean and organized code.
Global Scope:
In JavaScript, variables declared outside of a function have global scope. This means they can be accessed from anywhere in the code, including within functions.
javascriptlet x = 10; // global variable
function foo() {
console.log(x); // access global variable
}
foo(); // output: 10
In this example, x
is a global variable and can be accessed from within the foo()
function.
Local Scope:
Variables declared inside a function have local scope. This means they can only be accessed from within the function.
javascriptfunction bar() {
let y = 20; // local variable
console.log(y); // access local variable
}
bar(); // output: 20
console.log(y); // ReferenceError: y is not defined
In this example, y
is a local variable and can only be accessed from within the bar()
function.
Block Scope:
Starting with ECMAScript 6 (ES6), JavaScript introduced block scope. Block scope is a new way of declaring variables with the let
and const
keywords, which limit the visibility of the variable to the current block.
javascriptif (true) {
let z = 30; // block-scoped variable
console.log(z); // access block-scoped variable
}
console.log(z); // ReferenceError: z is not defined
In this example, z
is a block-scoped variable and can only be accessed from within the if
block.
Function Scope:
Before ES6, JavaScript had only two types of scope: global scope and function scope. Function scope is when variables are declared inside a function and can only be accessed from within the function.
javascriptfunction baz() {
let a = 40; // function-scoped variable
console.log(a); // access function-scoped variable
}
baz(); // output: 40
console.log(a); // ReferenceError: a is not defined
In this example, a
is a function-scoped variable and can only be accessed from within the baz()
function.
Nested Scope:
JavaScript allows for nested scope, where one scope can contain another scope.
javascriptlet b = 50; // global variable
function outer() {
let c = 60; // local variable in outer scope
function inner() {
let d = 70; // local variable in inner scope
console.log(b, c, d); // access variables in outer and inner scope
}
inner();
}
outer(); // output: 50 60 70
In this example, b
is a global variable, c
is a local variable in the outer()
function, and d
is a local variable in the inner()
function. The inner()
function can access all three variables because it is nested within the outer()
function.
Lexical Scope:
JavaScript uses lexical scoping, which means that the visibility of variables is determined by their location in the code. Variables defined in an outer scope are visible in the inner scope, but the opposite is not true.
javascriptlet e = 80; // global variable
function outerFunc() {
let e = 90; // local variable in outerFunc scope
function innerFunc() {
console.log(e); // access local variable in outerFunc scope
}
innerFunc();
}
outerFunc(); // output: 90