Where do I need to place a snippet of JavaScript code that initializes a variable that must be visible to all code executed with the page? (For example, event handlers on elements will need to access this variable).
Hence, the natural place to put global variable declaration statements is before any function definitions: i.e., right at the beginning of the program. Global variables declarations can be used to initialize such variables, in the regular manner.
There are two ways to declare a variable globally: Declare a variable outside the functions. Assign value to a variable inside a function without declaring it using “var” keyword.
Are global variables stored in specific object? The answer is yes; they are stored in something called, officially, the global object. This object is described in Section 15.1 of the official ECMAScript 5 Specification.
Always declare JavaScript variables with var , let , or const . The var keyword is used in all JavaScript code from 1995 to 2015. The let and const keywords were added to JavaScript in 2015. If you want your code to run in older browser, you must use var .
The only way to not have a global variable is to use the var
keyword in the scope of a function. Anything else is a global variable.
(function() {
var local = 5;
})();
It doesn't matter if the function is a literal or function definition, it has to be some type of function.
Global variable examples:
1:
var global = 5;
The above is not in a function scope, therefore global even if var
is used.
2.
(function() {
global = 5;
})();
In the above, no var
was used, so it becomes an implied global.
3.
function foo(){}
foo
was not defined inside of another function or assigned to a object key so its globally accessible.
4.
(function() {
var local = global = 5;
})();
When doing multiple assignments with var
, only the first variable becomes local... so global
is a global variable and equates to 5.
5.
window.foo = 5;
Prefixing window.
is an explicit way of defining a global variable in the context of a browser.
6.
this.x = 5;
By default in browsers, this
points to the DOMWindow unless you're in a method that's attached to an object which is not window
. It's the same as #5. Note that if you use a method like XMLHttpRequest, the context is of the window.
7.
with ( window ) { name = 'john'; }
If you use the with
statement and you dont reference an object that already has a property, a global variable is defined. It's best to avoid using the with
keyword in general.
Conclusion:
Personally, I would keep my code in an anonymous function scope, and only explicitly declare globals when I need to.
(function() {
var governor = 'Schwarzenegger',
state = 'California';
window.president = 'Obama';
})();
In the above, I define governor
and state
variables and they are local to my function. I want to explicitly define president
as a global variable. This way, I'm not confused about which variables I defined as globals or not, because I explicitly prefix them with window.
.
You can do it out of any function, or in a function without using the 'var' keyword. Assign it before any other scripts (very top of the page, likely) so the scripts can read the value.
You can also place it in an included JS file, but putting it right on the page is usually more usable as you can see the global values easily, and they can be modified for each page by the server-side code. Also try to prevent assigning global variables in the body, it may make confussions and will be harder to read.
<head>
<script>
var numberOfDucks = 1000; // Global
function some_function() {
// numberOfDucks is accessible here
alert (numberOfDucks);
// until you mask it by defining a local variable using the 'var' keyword
var myLocal = 0; // is a local
anotherGlobal = 0; // is a global
}
</script>
<script>
// potentially some other script
</script>
<script src="even_more_script.js">
</head>
Defining a global in a function (implied-global) is not a good idea because it will make a lot of confussion.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With