Global Objects in JavaScript
The JavaScript global object allows you to access the variables, functions, objects, etc., defined in the global scope and available everywhere in the code.
In the browser, a global object is named as ‘window‘, and in Node.js, the global object is named ‘global‘. However, the global object could have different names in different run-time environments.
The ‘globalThis‘ has been introduced in ECMAScript 2020, which works with most browsers and run time environments as a global object.
Syntax
We can follow the syntax below to use the global object to access the variables available everywhere in the JavaScript code.
var a =10;let b = window.a;// Accessing the global variable in the browser
In the above syntax, variable ‘a’ is a global variable, as it is defined in the global scope using the var keyword.
Examples
Example: Accessing global variables through the global object
In the below example, we have defined the ‘name’ variable in the global scope using the var keyword. After that, we access the name variable using the window (global) object.
<html><body><div id ="output">The company name is:</div><script>var name ="Tutorialspoint";let company = window.name;document.getElementById("output").innerHTML += company;</script></body></html></pre>Output
The company name is: TutorialspointSimilarly, if you define the function in the global scope, you can access it anywhere using the global object.
Example: Accessing the global function through the global object
In the below example, we have defined the sum() function in the global scope. After that, we have defined the obj object containing the num1, num2, and sum properties. The sum properties are initialized with a value returned by the sum() function. We used the' window' object to invoke a global sum() function.
So, you can access the global variable and instances anywhere in the JavaScript code using the global object.
<html><body><p id ="output"></p><script>functionsum(a, b){return a + b;}const obj ={num1:10, num2:20, sum: window.sum(10,20),} document.getElementById("output").innerHTML +="The object is: "+JSON.stringify(obj);</script></body></html></pre>Output
The object is: {"num1":10,"num2":20,"sum":30}If you want to make value globally accessible from the local scope, you can directly add value to the 'window' object as a property.
Let's look at the example below.
Example: Making variable globally accessible from the function scope
In the example below, we add the 'addition' property to the window object in the sum() function's body to make it available everywhere.
After that, we access the 'addition' property using the 'window' object.
<html><body><div id ="output"></div><script>functionsum(a, b){window.addition = a + b;}sum(20,30); document.getElementById("output").innerHTML ="The sum is: "+ window.addition;</script></body></html></pre>Output
The sum is: 50You can also access the global variables without using the global object like a window, as the script is assigned under the object by the JavaScript scripting engine by default. However, you can use the global object to make a variable or expression global.
The JavaScript global object itself contains various methods like isNaN(), decodeURI(), etc. You can access them using the global object-like window in the browser and global in Node.js.
Example: Accessing pre-defined methods of the global object
The JavaScript isNaN() method of the window object is used to check whether the argument passed is a number or not. If the argument is a number, it returns false. Otherwise, it returns true.
<html><body><p id ="output"></p><script>let isNumer = window.isNaN("Hello");document.getElementById("output").innerHTML ="Is hello not a number? "+ isNumer;</script></body></html></pre>Output
Is hello not a number? trueUsing the JavaScript Global Object for Polyfills
You can use the JavaScript global object to check whether your browser supports a particular feature. You can show a related message if the user's browser does not support a particular feature.
Look at the example below to check whether the user's browser supports the promises.
Example
In the below code, we check whether the 'promise' property exists in the window object. If yes, promises are supported by the browser, and you can execute the promise. Otherwise, you can print the message that your browser doesn't support promise.
<html><body><p id ="output"></p><script>const output = document.getElementById("output");if(window.Promise){output.innerHTML +="Your browser supports promises";}else{ output.innerHTML +="Your browser doesn't support promises";}</script></body></html></pre>Output
Your browser supports promisesThe JavaScript global object only stores the truly global variables. You shouldn't store the variable in the global object that is not global. Otherwise, it can create conflicts in your project.