JavaScript Scope
Scope is the context in which our variables are declared. We think about scope in relation to blocks because variables can exist either outside of or within these blocks.
In JavaScript, we say that variables are either in global or local scope. Global variables are variables that are accessible outside of blocks. Local variables are variables that are only accessible within blocks.
Global Scope
Variables and functions declared outside of any function or block of code have global scope. They can be accessed from anywhere in the code, including inside functions and blocks.
For example:
let color = 'blue'; // global scope
function colorUpdate() {
color = 'red';
console.log(color); // Output: red
}
colorUpdate();
console.log(color); // Output: red
In the example above:
- We define a variable
color
at the top of our code, outside of any block. - Since this variable is not declared inside a function or block, it is in the global scope, and we can access it anywhere in our code.
Local Scope
Variables and functions declared inside a function or block have local scope. They can only be accessed within the function or block where they are declared.
For example:
function colorUpdate() {
let color = 'purple'; // local scope
console.log(color); // Output: purple
}
colorUpdate();
console.log(color); // Output: ReferenceError
In the example above:
- We define a variable
color
inside thecolorUpdate
function. - Since this variable is declared inside a function, it is in the local scope, and we can only access it within that function.
- When we try to access the variable outside of the function, a
ReferenceError
is thrown because it is not defined outside of the function.
Block Scope
Block scope is a type of scope in JavaScript that was introduced in ECMAScript 6 (ES6) with the introduction of the let
and const
keywords. Variables declared with let
and const
have block scope, which means they are only accessible within the block of code where they are declared.
As an example:
function myFunction() {
let x = 10;
if (true) {
let y = 20;
const z = 30;
console.log(x); // Output: 10
console.log(y); // Output: 20
console.log(z); // Output: 30
}
console.log(x); // Output: 10
console.log(y); // Throws a ReferenceError: y is not defined
console.log(z); // Throws a ReferenceError: z is not defined
}
myFunction();
In this example:
x
is declared withlet
inside the function, so it has function scope and can be accessed anywhere inside the function.y
andz
, on the other hand, are declared withlet
andconst
inside the if statement block, so they have block scope and can only be accessed within that block.- When we try to access
y
andz
outside of the block, aReferenceError
is thrown because they are not defined in that scope.
Local Scope
Local scope is a type of scope in JavaScript that refers to variables or functions declared inside a function or block of code. These variables or functions are only accessible within the function or block where they are declared, and they are not visible or accessible outside of that scope.
As an example:
function myFunction() {
let x = 10; // x is declared in the local scope of myFunction
console.log(x); // Output: 10
}
myFunction();
console.log(x); // Throws a ReferenceError: x is not defined
In this example:
x
is declared inside themyFunction
function, so it has local scope and can only be accessed within that function.- When we try to access
x
outside of the function, aReferenceError
is thrown because it is not defined in the global scope.
Function Scope
Function scope is a type of scope in JavaScript that refers to variables or functions declared inside a function. These variables or functions are only accessible within the function where they are declared, and they are not visible or accessible outside of that function.
As an example:
function outerFunction() {
let x = 10; // x is declared in the local scope of outerFunction
function innerFunction() {
let y = 20; // y is declared in the local scope of innerFunction
console.log(x); // Output: 10
console.log(y); // Output: 20
}
innerFunction();
console.log(x); // Output: 10
console.log(y); // Throws a ReferenceError: y is not defined
}
outerFunction();
In this example:
x
is declared insideouterFunction
, so it has function scope and can only be accessed within that function.y
is declared insideinnerFunction
, so it has function scope and can only be accessed within that function.- When we try to access
y
outside of the function, aReferenceError
is thrown because it is not defined in the global scope.
Lexical Scope
Lexical scope is a type of scope in JavaScript that refers to where variables and functions are defined at the time of authoring. Lexical scope is sometimes also referred to as static scope.
As an example:
function outerFunction() {
let x = 10;
function innerFunction() {
let y = 20;
console.log(x); // Output: 10
console.log(y); // Output: 20
}
innerFunction();
console.log(x); // Output: 10
console.log(y); // Throws a ReferenceError: y is not defined
}
outerFunction();
In this example:
x
is defined in the global scope, so it has global scope and can be accessed anywhere in the code.y
is defined in the local scope ofinnerFunction
, so it has local scope and can only be accessed within that function.- When we try to access
y
outside of the function, aReferenceError
is thrown because it is not defined in the global scope.