CODEWITHSUNDEEP
javascriptjquery
Saturnix
Saturnix

Reputation: 10564

Are global variables instantiated before document ready?

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>

Upvotes: 6

Views: 5771

Answers (4)

James Allardice
James Allardice

Reputation: 166021

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

Upvotes: 8

Somnath Kharat
Somnath Kharat

Reputation: 3610

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

Upvotes: 0

xborus
xborus

Reputation: 13

Yes, even before 'close' tag.

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

Upvotes: 0

Justin Ethier
Justin Ethier

Reputation: 134227

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.

Upvotes: 0

Related Questions