Introduction to JavaScript Global Variable
In JavaScript we can declare the objects globally and locally in the functions based on the requirements and developers will create and assign the instance in either local or global in the application. If we use global instance in the JavaScript variables and functions will be used anywhere in the package throughout entire application programs we will call the instance name in the other packages also in default those objects that are built in the either language or environments. In a browser it is also called as window objects but in any of the JavaScript frameworks like node.js it is simply called global variable. When we use the same variable in other environments it may vary and called it in different names.
Syntax:
The var is one of the keyword in JavaScript for accessing the objects in entire world like global-scoped variables and also it has the option for initializing the object values in the scope.
<html>
<head>
<script>
function name()
{
var variable name and also initialize any values to the variable;
------some javascriptlogiccodes----
}
</script>
</head>
<body>
</body>
</html>Above code is one of the basic syntax of the JavaScript function used for declaring the variable as global.
How does JavaScript Global Variable work?
The scope of the global variable will be declared using the var keyword and it is used for current execution contexts and closures in which it is used for either enclosing the functions and it has to be declared the values in the variable scope and also it has to be used for outside of the any JavaScript functions. When we use same variable name in other code areas like within the same function itself the var keyword avoid duplicates it shows error because it is declared with the strict mode even though the variable values are not affected unless and until other global variable scope is performed.
When we use the global context in the JavaScript variable that is when we declare and assign the values using var keyword it is a non-configurable property of the entire global objects. Whenever we assign the values in global scope the variable becomes property for global objects. We use globalThis keyword also used for sometimes in the JavaScript it is added additionally to the language code was standardized names for the entire global objects that should be supported across all the packages whichever we have created in the particular application.
In some web browsers like non-chromium browsers especially in the Microsoft Edge Type browsers globalThis is not supported so far but it can be easily polyfilled in the scripts. If we use same global variable in another environments it is better to be used for globalThis keyword. All the attributes and values related to the global level objects is used directly in the script. We have not used let and const variable type in the script especially in the global-scope. This will behave for specifically in compatibility reasons whereas some other modern scripts we used JavaScript modules this thing is not happen in all the times of global variables in JavaScript. This global variables will be used all times mostly discouraged in the browsers.
There has been some few type of global variables as possible in the scripts the code designs and the methods used in the JavaScript will get the user input variables and it produces certain output is outcoming for the clearer explanation of the code design factors. The global type of instance mainly holds its variables and it should be available in everywhere of the scripts. The objects includes mainly arrays in the JavaScript. It will be assigned and called with the pre-defined built-in functions in windows environment. globalThis variable is used for global instance that has the entire universal name instance of the scripting codes.
Examples of JavaScript Global Variable
Given below are the examples mentioned:
Example #1
Code:
<!DOCTYPE html>
<html>
<body style="text-align:center;"
id="demo">
<h1 style="color:green;">
</h1>
<button onclick="sample()">
Welcome
</button>
<p id="sample"
style="color:red;
font-size: 23px;
font-weight: bold;">
</p>
<script>
var i = "Welcome To My Domain !";
function sample() {
var j = "Have a Nice Day !";
alert("Welcome World :" + i);
j = "Hello World welcome !";
hell();
}
alert("Users How are you : " + i);
function hell() {
alert("Fine Nice Weekend : " + j);
}
</script>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:red;">Welcome To My Domain</h1>
<p>Users Have a Nice day</p>
<p id="id1"></p>
<p id="id2"></p>
<script>
sample();
function sample() {
var i = "siva";
document.getElementById("id1").innerHTML =
typeof i + " " + i;
}
document.getElementById("id2").innerHTML =
typeof i;
</script>
</center>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;">Welcome To My Domain</h1>
<p>Users Have a Nice day</p>
<p id="id1"></p>
<p id="id2"></p>
<p id="id3"></p>
<p id="id4"></p>
<script>
var x = 4;
function aA(y) {
var r = x + y;
console.log(r);
}
function bB(y) {
x = 6;
var z = x + y;
console.log(z);
}
function cC(y) {
var x = 5;
var z = x + y;
console.log(z);
}
function sample1() {
vari = "siva";
document.getElementById("id1").innerHTML =
typeof i + " " + i;
}
function sample() {
var j = "Have a Nice Day !";
alert("Welcome World :" + i);
j = "Hello World welcome !";
hell();
document.getElementById("id2").innerHTML =
typeof j;
}
alert("Users How are you : " + i);
function hell() {
alert("Fine Nice Weekend : " + j);
var k = "Have a Nice Day !";
document.getElementById("id3").innerHTML =
typeof k;
}
var window.g = "guuud";
functionholl()
{
var l = "Have a N!";
alert(window.g);
alert(g);
document.getElementById("id4").innerHTML =
typeof l;
}
</script>
</body>
</html>Output:
In the above examples we used var keyword global variable types in different ways and it called functions inside and outer end of the scopes.
Conclusion
Above concepts, we used the global variable in different scenarios and it has the set of rules for naming a variable, and also reassigned the variable values and its scope and hoisting are some of the limits in the original var variable including let and const variables for used in the JavaScript.
Recommended Articles
This is a guide to JavaScript Global Variable. Here we discuss how does JavaScript global variable work? and examples respectively. You may also have a look at the following articles to learn more –
