In JavaScript, the global object can be accessed through the global object property. When operating within a web browser, this global object is commonly known as the window. In different contexts, such as web workers, it may simply be termed as global. JavaScript frameworks that operate on web servers leverage the globalThis property consistently to retrieve the global object.
Why do we use the globalThis object?
- Easy to developers: The various environments made it difficult to construct JavaScript code to run on several platforms. The environment, such as global objects, is referred to in various settings.
- The setting of framework: Javascript framework with the help of the GlobalThis object is created to all of these issues address. We can now execute JavaScript code in multiple settings of the framework.
- Windows and non-window environment: We can use global resources without creating additional checks and tests. We may now execute our function in a window or non-window environment.
- Code execution: This object is quite helpful when unsure about the environment and code execution. It is helpful to make our code executable on several environments in an easy way.
Global keyword and its environment table
The table below illustrates the JavaScript output environment along with the corresponding global keyword that it supports.
| Javascript Environment | Global keyword |
|---|---|
| Web Browsers | this |
| Web Workers | self |
| Node.js | global |
Syntax
The syntax presented below is utilized within the script tag to manipulate a global object.
globalThis.[variable]= value;
It is utilized directly within the console as well as in various output tabs.
Examples
The various examples illustrate the JavaScript variable alongside the global data presented in the output section.
Example 1
The subsequent fundamental illustration demonstrates the use of the global variable alongside the process within the console tab.
<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please See the Console Tab. </b>
<script>
console.log("Javascript globalThis object");
console.log(globalThis);
</script>
</body>
</html>
Output
The image shows the output of the global object.
Example 2
The subsequent fundamental example demonstrates the use of the global variable alongside various functions within the console tab.
<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please See the Console Tab. </b>
<script>
console.log("Javascript globalThis object");
console.log(globalThis.self);
console.log(globalThis.window);
console.log(globalThis.process);
</script>
</body>
</html>
Output
The image shows the output of the global object.
Example 3
The subsequent fundamental example demonstrates the use of the globalThis variable alongside the console tab.
<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please See the Console Tab. </b>
<script>
function setGlobalvariableValue() {
globalThis.myValue ='Hello Students';
}
setGlobalvariableValue();
console.log("Javascript globalThis object");
console.log(globalThis.myValue);
</script>
</body>
</html>
Output
The image shows the output of the global object.
Example 4
The subsequent fundamental illustration demonstrates the use of the global variable called globalThis in conjunction with the alert function.
<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please Run and See the alert box. </b>
<script>
function setGlobalvariableValue() {
globalThis.myValue ='Hello Students';
}
setGlobalvariableValue();
alert("Javascript globalThis object \n" +globalThis.myValue);
</script>
</body>
</html>
Output
The image shows the output of the global object.
Example 5
The subsequent fundamental illustration demonstrates the utilization of the global variable along with the onclick event handler.
<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please click and see the output information. </b> <br>
<button type="button" onclick="setGlobalvariableValue();">
Click me to display Data.</button>
<p id = "demo2"> </p>
<script>
function setGlobalvariableValue() {
globalThis.myValue ='Hello Students';
document.getElementById('demo2').innerHTML = globalThis.myValue;
}
</script>
</body>
</html>
Output
The image shows the output of the global object.
Example 6
The subsequent fundamental illustration demonstrates the use of the typeof function with the global variable.
<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> please click and see the Boolean output. </b> <br> <br>
<button type = "button" onclick = "setGlobalvariableValue();">
Click me to display Data.</button>
<p id = "demo2"> </p>
<script>
function setGlobalvariableValue() {
globalThis.myValue ='Hello Students';
const data_Fetch = typeof globalThis.fetch === 'function';
document.getElementById('demo2').innerHTML = data_Fetch;
}
</script>
</body>
</html>
Output
The image shows the output of the global object.
Compatible Browsers
The javascript globalThis object is supported by the below browsers.
- Chrome
- Firefox
- Opera
- Edge
- Safari
Conclusion
The term "globalThis" pertains to JavaScript as defined in ES11 or ES2020. This feature is part of the ECMAScript 2020 specification. The globalThis object is designed to facilitate the development of cross-platform code, which is code that can function effectively across different JavaScript environments.