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> 

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> 

• javascript
• jquery

• 3 What happened when you tried this? It could crash for a different reason... – Grant Thomas Commented Aug 6, 2013 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 Commented Aug 6, 2013 at 14:04
• 1 Yet that's not what you ask. – Grant Thomas Commented Aug 6, 2013 at 14:04
• 1 What made you think it wouldn't work? You're basically asking if bar is available in var bar = 'foo'; alert(bar);. – JJJ Commented Aug 6, 2013 at 14:08
• 2 You're declaring and initialising the variable before you even install the reader listener. How could it fire before that? – Bergi Commented Aug 6, 2013 at 14:10

4 Answers 4

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

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

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.

Yes, even before 'close' tag.

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

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