Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where do I declare global JavaScript variables in a web page?

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).

like image 818
Tony the Pony Avatar asked Nov 22 '10 16:11

Tony the Pony


People also ask

Where should global variables be declared?

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.

How do you declare a global variable in HTML?

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.

Where are global variables stored in JavaScript?

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.

Where do I declare variables in JavaScript?

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 .


2 Answers

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..

like image 105
meder omuraliev Avatar answered Nov 07 '22 17:11

meder omuraliev


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.

like image 24
SuperDuck Avatar answered Nov 07 '22 17:11

SuperDuck