Are global variables instantiated before document ready?

Question

If I declare a global variable right after a script tag, is it safe to access this variable in a function called in document ready?

<script type="text/javascript">
var bar = "foo";

$(document).ready(function(){

callBar()

});

function callBar(){
alert(bar);
// will I crash?
}
</script>

what then if I do this:

<script type="text/javascript">

$(document).ready(function(){

callBar()

});

function callBar(){
alert(bar);
// will I crash?
}

var bar = "foo";
</script>

What happened when you tried this? It could crash for a _different_ reason... — Grant Thomas, Aug 06 '13 at 14:03
I didn't tried it already. I guess it will work, but I want to know if it is safe for all browsers. — Saturnix, Aug 06 '13 at 14:04
I would think so because it is declared before it and the document is parsed from top to bottom. Can always give it a try and see if you get the expected value on document ready. — asymptoticFault, Aug 06 '13 at 14:04
Yes it is safe to access the variable, since it is declare outside the closure created via `$(document).ready(function() { ... });` — Jason Evans, Aug 06 '13 at 14:06
What made you think it *wouldn't* work? You're basically asking if `bar` is available in `var bar = 'foo'; alert(bar);`. — JJJ, Aug 06 '13 at 14:08
You're declaring and initialising the variable before you even install the reader listener. How could it fire before that? — Bergi, Aug 06 '13 at 14:10
you're right! I've updated the code. Please see the second one. — Saturnix, Aug 06 '13 at 14:16

James Allardice · Accepted Answer · 2013-08-06T14:20:13.913

is it safe to access this variable in a function called in document ready

Yes. The variable is declared (added as a binding to the variable environment of the execution context) as a very early step of executing that script. (Note that it doesn't actually get assigned a value until the assignment statement is reached during parsing. This is commonly referred to as "hoisting" but will not affect your example).

Since script execution is synchronous (the browser will stop rendering until it's finished parsing and executing the script element), the DOM ready event will not fire until that execution is complete.

Edit (question was updated)

what then if I do this...

As described above, the variable declaration will be hoisted to the top of the scope in which it appears. Your second example is effectively interpreted as follows:

// Declarations (both function and variable) are hoisted
var bar;
function callBar() {
    alert(bar);
}

$(document).ready(function () {
    callBar();
});

bar = "foo";

Those declarations are therefore available throughout the entire scope. The ready event handler will be executed some time later, and has access to those declarations (since they appeared in the same scope as it).

Thanks for the interpreted code: I've had no idea it was like that. — Saturnix, Aug 06 '13 at 21:26
One thing not 100% clear from the answer is that the alert will return 'undefined', which means $(document).ready runs before all the global code has been interpreted. See http://jsfiddle.net/GregWoods/LnJEe/ — Greg Woods, May 28 '14 at 10:45

score 0 · Answer 2 · answered Aug 06 '13 at 14:08

Since bar is declared in global scope, I would expect it to be initialized before the call to callBar.

Also consider that JavaScript has function hoisting which allows variables to be referenced if they are in the proper scope, even if they are defined later in the program (although that is not the case here). From the MDN docs on Variable Scope:

Another unusual thing about variables in JavaScript is that you can refer to a variable declared later, without getting an exception. This concept is known as hoisting; variables in JavaScript are in a sense "hoisted" or lifted to the top of the function or statement. However, variables that aren't initialized yet will return a value of undefined.

score 0 · Answer 3 · answered Aug 06 '13 at 14:10

0

Yes, even before 'close' tag.

The function inside the '$(document).ready(function(){})' construction fires after all page has been loaded.

answered Aug 06 '13 at 14:10

xborus

13
4

It actually fires when the DOM is ready, not when everything in the page is loaded. `window.onload` does. Think of images, these can take a while to load, but jQuery is already fires before they have finished loading. – Broxzier Aug 06 '13 at 14:12

score 0 · Answer 4 · edited May 23 '17 at 12:08

0

Working with Global variable is safe.

But you have to take care while using Global Variables in Jquery

Use Window.bar="foo" instead of var bar="foo" for more info Best ways to use Global Variables in Jquery

I have used Global Variable and are really useful..

edited May 23 '17 at 12:08

Community

1
1

answered Aug 06 '13 at 14:12

Somnath Kharat

3,570
2
27
51

Are global variables instantiated before document ready?

4 Answers4