Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the value of a global variable inside of a function using JavaScript?
In JavaScript, variables can be declared with either global or local scope. Understanding how to modify global variables from within functions is essential for managing application state.
Global Variables are declared outside any function and can be accessed from anywhere in the code. Local Variables are declared inside functions and are only accessible within that specific function scope.
There are two main approaches to change global variable values inside functions:
Direct assignment
Using window object with bracket notation
Method 1: Direct Assignment
The most straightforward way is to directly assign a new value to the global variable by its name.
Syntax
var globalVariable = initialValue;
function modifyGlobal() {
globalVariable = newValue;
}
Example
<html>
<body>
<h2>Change Global Variable Value - Direct Assignment</h2>
<p>Initial global value: <span id="initial"></span></p>
<p>Enter two numbers:</p>
<input type="number" id="num1" placeholder="First number"><br><br>
<input type="number" id="num2" placeholder="Second number"><br><br>
<button onclick="changeValue()">Change Global Value</button>
<p id="result"></p>
<script>
var globalValue = 10;
document.getElementById("initial").textContent = globalValue;
function changeValue() {
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var previousValue = globalValue;
// Direct assignment to global variable
globalValue = num1 * num2;
document.getElementById("result").innerHTML =
"Global value changed from <b>" + previousValue +
"</b> to <b>" + globalValue + "</b>";
}
</script>
</body>
</html>
Method 2: Using window Object
In browser environments, global variables become properties of the window object. You can modify them using bracket notation.
Syntax
var globalVariable = initialValue;
function modifyGlobal() {
window['globalVariable'] = newValue;
}
Example
<html>
<body>
<h2>Change Global Variable Value - Window Object</h2>
<p>Initial global value: <span id="initial2"></span></p>
<p>Enter two numbers:</p>
<input type="number" id="num3" placeholder="First number"><br><br>
<input type="number" id="num4" placeholder="Second number"><br><br>
<button onclick="changeValueWindow()">Change Global Value</button>
<p id="result2"></p>
<script>
var globalCounter = 25;
document.getElementById("initial2").textContent = globalCounter;
function changeValueWindow() {
var num1 = Number(document.getElementById("num3").value);
var num2 = Number(document.getElementById("num4").value);
var previousValue = window['globalCounter'];
// Using window object with bracket notation
window['globalCounter'] = num1 + num2;
document.getElementById("result2").innerHTML =
"Global value changed from <b>" + previousValue +
"</b> to <b>" + globalCounter + "</b>";
}
</script>
</body>
</html>
Comparison
| Method | Syntax | Use Case |
|---|---|---|
| Direct Assignment | globalVar = newValue |
Simple, direct approach |
| Window Object | window['globalVar'] = newValue |
Dynamic variable names or strict mode |
Best Practices
While both methods work, consider these guidelines:
Use direct assignment for clarity and simplicity
Use window object approach when working with dynamic variable names
Minimize global variable usage in larger applications
Consider using
letorconstfor better scope control
Conclusion
Both direct assignment and window object methods effectively modify global variables from within functions. Choose the approach that best fits your specific use case and coding standards.
4K+ Views
