In English, "scope" is defined as: "The extent of the area that something is relevant". In JavaScript, this definition holds, with one small adjustment: "The extent of the area that something is accessible". With this in mind there are two basic areas with which a variable can be contained and is accessible: globally and locally.
Global Scope
Variables with global scope are part of the global object. In a web browser, this will usually be the Window object. This global object can be grabbed from anywhere in the JavaScript program.
Local Scope
Variables scoped locally, are confined inside of curly brackets { }. This can be part of a function, or as a stand-alone block. There are a few different types of local scope. These are outlined below.
Function Scope - Local
This is encased in the function brackets function() { ...this is within the Function scope }
function varScopeDemo() {
var firstVariable = "First Variable";
for (var i = 0; i & lt; = 5; i++) {
var secondVariable = "Second Variable";
};
console.log(secondVariable);
// RESULT: "Second Variable" because var secondVariable used within the for loop is available anywhere in the function
}
varScopeDemo();
console.log(firstVariable);
// RESULT: "Uncaught ReferenceError: firstVariable is not defined" - This happens because var firstVariable is used within the function and so not available anywhere outside the function
Block Scope - Local
This scope is any any area enclosed by curly brackets. This could be functions, if statements, stand-alone brackets, etc: { ...this is within the Block scope }
There are two ways to make a variable block scoped: const and let.
function letScopeDemo() {
let firstVariable = "First Variable"
for (let i = 0; i <= 5; i++) {
let secondVariable = "Second Variable";
};
console.log(secondVariable);
// RESULT: "Uncaught ReferenceError: firstVariable is not defined" - This happens because let secondVariable used within the for loop is available anywhere in the function
}
letScopeDemo();
console.log(firstVariable);
// RESULT: "Uncaught ReferenceError: secondVariable is not defined" - This happens because var firstVariable is used within the function and so not available anywhere outside the function
function constScopeDemo() {
const firstVariable = "First Variable";
for (let i = 0; i & lt; = 5; i++) {
firstVariable = "New Value";
const secondVariable = "Second Variable"
// Uncaught TypeError: Assignment to constant variable. because firstVariable was initially set up using const
};
console.log(secondVariable);
// RESULT: Uncaught ReferenceError: secondVariable is not defined because const secondVariable used within the for loop is available anyere in the function
}
constScopeDemo();
console.log(firstVariable);
// RESULT: "Uncaught ReferenceError: firstVariable is not defined" because const firstVariable is used within the function and so not available anywhere outside the function
To show the immutable nature of const and the ability to change the Object data.
const myVariable = {
name: "John"
};
console.log(myVariable); // RESULT: "John"
myVariable = {
newObjectName: "New Name"
};
// RESULT: VM506:6 Uncaught TypeError: Assignment to constant variable. because const myVariable is used making it unchangeable
myVariable.name = "The Changed Name"
console.log(myVariable);
// RESULT: "The Changed Name" because the values can be changed with const
Object.freeze(myVariable);
myVariable.name = "Change after .freeze()"
console.log(myVariable);
// RESULT: "The Changed Name" because the Object was frozen and now even the properties can not be changed const Lexical Scope - Local
Lexical Scope refers to the fact that nested functions have access to the resources of their parent function. This is to say that nested functions are "lexically bound" to their parents. This works only in one direction heading down from the parent to the nested children, but will not work in reverse. This means parents do not have access to resources locally coped to their children. The basic setup is:
function parentFunct() {
...parent variables
function nestedFunct() {
...code with access to the parent variables
}
}
↓ Example ↓
function parent() {
var material = 'Wood';
// color is not accessible here
function childParent() {
// material is accessible here
// color is not accessible here
function child() {
// material is accessible here
// color is accessible here
var color = 'red';
}
}
}
One Reply to “Scope in JavaScript”