JavaScript Scope |
-- Learning is not just about technology, but also about dreams!
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
JavaScript Tutorial
JavaScript Tutorial JavaScript Introduction JavaScript Usage JavaScript VScode JavaScript in Chrome JavaScript Output JavaScript Syntax JavaScript Statements JavaScript Comments JavaScript Variables JavaScript Data Types JavaScript Objects JavaScript Functions JavaScript Scope JavaScript Events JavaScript Strings JavaScript String Templates JavaScript Operators JavaScript Comparisons JavaScript If...Else Statements JavaScript switch Statement JavaScript for Loop JavaScript while Loop JavaScript break and continue Statements JavaScript typeof JavaScript Type Conversion JavaScript Regular Expressions JavaScript Errors β Throw, Try and Catch JavaScript Debugging JavaScript Hoisting JavaScript Strict Mode JavaScript Common Mistakes JavaScript Forms JavaScript Form Validation JavaScript Validation API JavaScript Reserved Words JavaScript this JavaScript let and const JavaScript JSON JavaScript void JavaScript Asynchronous Programming JavaScript Promise JavaScript async/await JavaScript Coding Conventions JavaScript Quiz
JS Functions
JavaScript Function Definition JavaScript Function Parameters JavaScript Function Invocation JavaScript Closures
JS Classes
JavaScript Classes JavaScript Class Inheritance JavaScript Static Methods
JS HTML DOM
DOM Introduction DOM HTML DOM CSS DOM Events DOM EventListener DOM Elements HTMLCollection Object NodeList Object
JS Advanced Tutorial
JavaScript Objects JavaScript prototype JavaScript Number Object JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object
JS Browser BOM
JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Popup Boxes JavaScript Timing Events JavaScript Cookie
JS Libraries
JavaScript Libraries JavaScript Testing jQuery JavaScript Testing Prototype
JS Examples
JavaScript Examples JavaScript Object Examples JavaScript Browser Object Examples JavaScript HTML DOM Examples JavaScript Summary
JS Reference
JavaScript Objects HTML DOM Objects JavaScript Asynchronous Programming JavaScript Static Methods
JavaScript Scope
Scope refers to the set of variables, objects, and functions you have access to.
JavaScript Scope
In JavaScript, objects and functions are also variables.
In JavaScript, scope is the set of variables, objects, and functions you have access to.
JavaScript Function Scope: Scope is modified within functions.
JavaScript Local Scope
Variables declared inside a function are local variables and have local scope.
Local variables: Can only be accessed from within the function.
Example
// Cannot call carName variable here
function myFunction() {
var carName = "Volvo"; // Can call carName variable here
}
Because local variables are only accessible within the function, different functions can use variables with the same name.
Local variables are created when a function starts executing, and are automatically destroyed when the function finishes executing.
JavaScript Global Variables
Variables declared outside a function are global variables.
Global variables have global scope: All scripts and functions on a web page can use them.
Example
var carName = "Volvo"; // Can call carName variable here
function myFunction() {
// Can call carName variable here
}
If a variable is not declared inside a function (without the var keyword), it becomes a global variable.
In the following example, carName is inside the function but is a global variable.
Example
// Can call carName variable here
function myFunction() {
carName = "Volvo"; // Can call carName variable here
}
JavaScript Variable Lifecycle
JavaScript variables have a lifecycle when they are declared.
Local variables are destroyed after the function finishes executing.
Global variables are destroyed when you close the page.
Function Parameters
Function parameters act as local variables inside functions.
Global Variables in HTML
In HTML, the global scope is the window object. Therefore, the window object can call local variables declared without var inside a function.
Note: All global variables belong to the window object.
Example
// Can use window.carName here
function myFunction() {
carName = "Volvo";
}
Did You Know?
| Your global variables, or functions, can overwrite variables or functions on the window object. Local variables, including the window object, can overwrite global variables and functions. |
In JavaScript, local variables inside a function are generally not directly accessible from the outer scope. However, there are several ways to expose local variables within a function to the outer scope, as follows:
- Through the global object: Inside a function, you can make a local variable globally accessible by assigning it as a property of the window object. For example, using the statement
window.a = a;, you can access the value of this local variable from outside the function viawindow.a. - Defining a global variable: If you declare a variable inside a function without using keywords like
var,let, orconst, the variable is treated as a global variable and can be accessed outside the function. However, this practice is generally not recommended because it can lead to unintended side effects and make the code difficult to maintain. - Return value: You can return the value of a local variable from inside a function using a
returnstatement, and then receive this return value outside the function. In this way, although the local variable itself is not exposed, its value can be passed to the outside through the function call. - Closures: The closure feature in JavaScript allows inner functions to access the local variables of outer functions. Even after the outer function has finished executing, its local variables can still be referenced by inner functions.
- Properties and methods: Variables and functions defined in the global scope become properties and methods of the window object. Therefore, when calling them, you can omit
windowand use the variable or function name directly.
YouTip