JavaScript Scope
Scope = Visibility
Scope determines theaccessibility (visibility) of variables.
JavaScript variables have 3 types of scope:
- Global scope
- Function scope
- Block scope
Global Scope
Variables declaredGlobally (outside any block or function) haveGlobal Scope.
Global variables can be accessed from anywhere in a JavaScript program.
Variables declared withvar,letandconst are quite similar when declared outside a block.
They all haveGlobal Scope:
let y = 2; // Global scope
const z = 3; // Global scope
Example
A variable declared outside a function, becomesGLOBAL.
// code here can use carName
function myFunction() {
// code here can also use carName
}
Global variables hasGlobal Scope:
All scripts and functions in the same web page can access a variable with global scope.
Function Scope
Each JavaScript function have their own scope.
Variables defined inside a function are not accessible (visible) from outside the function.
Variables declared withvar,letandconst are quite similar when declared inside a function.
They all haveFunction Scope:
var carName = "Volvo"; // Function Scope
}
function myFunction2() {
let carName = "Volvo"; // Function Scope
}
function myFunction3() {
const carName = "Volvo"; // Function Scope
}
Example
Variables declared within a JavaScript function, areLOCAL to the function:
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
Local Variables has Function Scope
- They can only be accessed from within the function
- No scripts or functions outside the function can access them
- Variables with the same name can be used outside the function
- Variables with the same name can be used in different functions
- Local variables are created when a function starts
- Local variables are deleted when the function is completed
- Arguments (parameters) work as local variables inside functions
Block Scope
BeforeES6, JavaScript variables could only haveGlobal Scope orFunction Scope.
ES6 introduced two important new JavaScript keywords:let andconst.
These two keywords provideBlock Scope in JavaScript.
Variables declared withlet andconstinside a code block are "block-scoped," meaning they are only accessible within that block.
This helps prevent unintended variable overwrites and promotes better code organization:
Example
let x = 2;
}
// x can NOT be used here
Variables declared with thevar keyword can NOT have block scope.
Variables declared with thevar keyword,inside a { } block; can be accessed from outside the block.
Example (Not Recommended)
var x = 2;
}
// x CAN be used here
Automatically Global
If you assign a value to a variable that hasnot been declared, it will become aGLOBAL variable.
This code example will declare a global variablecarName, even if the value is assigned inside a function.
Example
// code here can use carName
function myFunction() {
carName = "Volvo";
}
Strict Mode
All modern browsers support running JavaScript in "Strict Mode".
In "Strict Mode", undeclared variables are not automatically global.
Global Variables in HTML
With JavaScript, the global scope is the JavaScript environment.
In HTML, the global scope is the window object.
Global variables defined with thevar keyword belong to the window object:
Global variables defined with thelet keyword do not belong to the window object:
Warning
Do NOT create global variables unless you intend to.
Your global variables (or functions) can overwrite window variables (or functions).
Any function, including the window object, can overwrite your global variables and functions.
The Lifetime of JavaScript Variables
The lifetime of a JavaScript variable starts when it is declared.
Function (local) variables are deleted when the function is completed.
In a web browser, global variables are deleted when you close the browser window (or tab).
