In JavaScript, there can be a requirement to utilize a particular value repeatedly. For instance, integrating or relating all the values with a particular value to return the desired outcome. In such scenarios, the global variable plays a vital role in reducing the overall code complexity and sorting the code functionalities on the developer’s end.
This article will discuss the utilization of the global variable within the JavaScript function.
What is a Global Variable in JavaScript?
The “global variables” have a global scope and can be invoked from anywhere in the program in JavaScript.
Let’s proceed to the following examples to understand this concept clearly.
Example 1: Utilization of Global Variable in JavaScript
In this example, the global variable will be initialized outside the scope of the function and will be accessed in the user-defined function:
let cup = "Tea";
let x = 5;
function myFunction(){
console.log('The global value of cup is :', cup);
let z = x + 10;
console.log('z is equal to : ', z);
}
myFunction();
</script>
In the above code lines:
- Firstly, create two global variables and assign the stated string and integer values, respectively.
- In the next step, define a function named “myFunction()”.
- In its definition, display the initialized global “string” value.
- After that, utilize the global “integer” value to return the sum of the values.
- Lastly, invoke the defined function and display the resultant sum on the console.
Output
In the above output, as observed, the utilization of the global variables has been done appropriately.
Example 2: Utilization of Global Variable Within a JavaScript Function
In this example, the global variable will be defined within a function and accessed in a separate function, thereby maintaining its global scope with the help of the “window” object:
<h3 id="head"></h3>
</body></center>
</html>
<script>
function myFunction1() {
window.globalVar = 2;
}
function myFunction2(){
let get = document.getElementById("head")
get.innerHTML= "The value is:" + window.globalVar
}
myFunction1()
myFunction2()
</script>
In the above code snippet:
- First of all, include a heading having the stated “id” to accumulate the resultant value.
- In the JavaScript code, define a function named “myFunction1()”.
- In its definition, initialize a global variable having the stated integer value with the help of the “window” object.
- Now, declare another function, “myFunction2()”.
- In the function definition, access the included heading by its “id” via the “getElementById()” method.
- After that, associate the “innerHTML” property with the fetched element and access the initialized global variable from the former function such that the global value is displayed as a “heading”.
- Finally, invoke both functions.
- As a result, the corresponding global value will be displayed on the DOM.
Output
In the above output, it is evident that the globally defined value has been accessed and displayed in the form of a heading.
Conclusion
“Global variable” is defined outside of the function’s scope that is accessible in the entire program. This variable can be defined within a JavaScript function via the “window” object. This article defines this variable in the JavaScript function globally and accessed in a separate function, thereby maintaining its global scope.
