CODEWITHSUNDEEP
javascriptjqueryvariablesscope
Aizaz Ul Haq
Aizaz Ul Haq

Reputation: 53

Why variable appears undefined outside document ready tags

I have observed a strange behavior while learning jQuery and Javascript. When I call a variable that is defined inside the $(document).ready, from outside these tags it appears undefined, even when I define it as a global variable, For example:

$(document).ready(function() {
   myVar = "test";
});
alert(typeof(myVar));
//Results "undefined"

If I call the same variable inside the document.ready tags it works as expected

$(document).ready(function() {
   myVar = "test";
   alert(typeof(myVar));
   //Results "String"
});

The result is same even after using window prefix.

$(document).ready(function() {
   window.myVar = "test";
});
alert(typeof(window.myVar));
//Results "undefined"

I understand about the variable scopes but why even global variables aren't working this way. I am so confused.

Upvotes: 2

Views: 1994

Answers (5)

Pedro Mora
Pedro Mora

Reputation: 95

The execution plan it's like

//this statement shall fix the driver, not run it
$(document).ready(function() {//-->this it's an event handler waiting to be fired when content is fully loaded
   myVar = "test";//-->myVar won't exists until this event is triggered
});
//this execute the alert function but myVar not exist yet
alert(typeof(myVar));

$(document).ready() is like to assign an event who will execute after the content is loaded, which means alert(myVar) will run before the lambda execution which was set as the content-loaded event. I hope you'll understand me.

Upvotes: 0

Sam Anderson
Sam Anderson

Reputation: 300

The other answers are correct but it is probably important to also note the $(document).ready(...) is also hiding your variable from the global scope. You could declare your variable then update it within the function

var myVar;

$(document).ready(function() {
    myVar = "test";
});

console.log(myVar)   // test

Upvotes: 0

Pointy
Pointy

Reputation: 413712

The code inside the "ready" handler will not run until the DOM has been fully built. The code outside the handler will run as soon as it is encountered. Thus, your alert() runs before the code in the handler runs, so the outcome makes perfect sense: the global variable has not yet been initialized, so its value is undefined.

You can see the sequence of execution clearly by putting alert() (or, better, console.log()) calls inside the "ready" handler:

$(document).ready(function() {
  console.log("In the 'ready' handler");
});
console.log("Outside the 'ready' handler");

When that runs, you'll see the "Outside" message logged first.

Upvotes: 3

Deben Oldert
Deben Oldert

Reputation: 114

The $(document).ready() gets fired after the page is fully loaded

When the script tag is fully loaded the alert gets executed.

So

  1. Script tag is loaded => Execute alert
  2. Continue loading page
  3. Page completly loaded => fire $(document).ready
  4. You var is getting set

The alert gets executed before your var is set

Upvotes: 0

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

Because the alert() is executed before your document is perfectly ready.. You may try even by declaring the variable before $(document).ready() still it will return undefined..

Upvotes: 1

Related Questions