Variable Undefined Scope

Question

Here is my code:

function example() { 
     var post = object.get("owner");
         post.fetch({
            success: function(post) {
               window.titles = post.get("username");
               console.log(window.titles);
            }
         });
     console.log(window.titles);
}

The first log works successfully. Outside of the method, the second log prints as undefined. Why?

How do I get a variable to work across the overall function? — david Turner, Aug 02 '14 at 01:20
@david Turner: you don't do that - you make all the job in a `success` callback. — zerkms, Aug 02 '14 at 01:23
assuming window is global scope, it will work outside of the above function, but as Shomz said, you're setting it via an async function, so you will need to either wait for it to finish, or check the value when using it outside of the function — kennypu, Aug 02 '14 at 01:23
possible duplicate of [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Whymarrh, Aug 02 '14 at 01:30
It works in the outside function, but a little later than you expect. — Shomz, Aug 02 '14 at 01:49

score 1 · Answer 1 · answered Aug 02 '14 at 01:23

1

This is async call. The inner will be executed after the POST success. Meanwhile the outer execute after you start to send POST. The window.titles is defined when the POST success

So the at the time outer call is executed, the window.titles is undefined. You should have look at this http://api.jquery.com/jquery.ajax/

answered Aug 02 '14 at 01:23

simpletron

739
4
14

Don't I receive a response under success though? – david Turner Aug 02 '14 at 01:34
I want to ensure that, the first and the second log is in the order of the code or it is on the console? You should have add some text to `console.log` to make it clear. And as your wonder, may the response is not fetched, or you have not parsed it in the right way. So add the `console.log(post)` inside the success callback – simpletron Aug 02 '14 at 01:38

score 0 · Answer 2 · answered Aug 02 '14 at 01:27

The post.fetch function is asynchronous, this means that it needs a callback to call when it's finished, otherwise you'll never know when the function has been completed. Asynchronous functions run separately from the rest of the code.

When you call post.fetch it start by its own and it will not stop the script, so right after calling post.fetch, the next line of code is executed, which is actually console.log(window.titles). But window.titles has not yet been defined, since that post.fetch is still working.

When post.fetch finishes working the given callback function gets executed, and then the window.titles variable gets defined. So if you want to log window.titles you have to put the console.log() only inside the callback of post.fetch.

score 0 · Accepted Answer · answered Aug 02 '14 at 01:45

It works in the outside function, but not right away because async calls take some time. That's the nature of JS.

The easiest way "out of it" is to move all the code that depends directly on the results of your async function into another function and then just run it from within the success callback.

Something like this:

function example() { 
     var post = object.get("owner");
         post.fetch({
            success: function(post) {
               window.titles = post.get("username");
               otherImportantCode(); // call the remaining code from here
            }
         });
     console.log(window.titles); // won't work here
} 

function otherImportantCode() {
     console.log(window.titles); // see, it works here, outside the example function
     // ... the rest of the code depending on window.titles
}

When you're ready for more advanced handling of such issues, learn about promises and events.

score 0 · Answer 4 · answered Aug 02 '14 at 01:48

It is helpful to think of asynchronous data as only being defined inside the success callback. While it may not always be true, it's the only time when it's ALWAYS defined. Anytime that you are outside the success callback, the data may not have been retrieved yet and the callback may not have run yet.

This is what your program looks like if you remove the asynchronous call:

function example() { 
     var post = object.get("owner");
     post.fetch();
     console.log(window.titles);
}

It is more obvious here that window.titles is undefined.

On a separate thread, elsewhere, once post.fetch() is complete, this will be executed (at some time in the future, who knows when... it could be in 1 ms, it could take 1 day, you really cannot know):

(function(post) {
   window.titles = post.get("username");
   console.log(window.titles);
})()

Do you see now what the problem is? window.titles has not been set yet. post.fetch() has been called, but the success callback has not returned yet.

There is no way to do what you're asking, which is, to retrieve data before you've actually retrieved data. Anything that requires the predictability of having fetched the data, must happen inside the callback (Edit: Or you may use promises or deferreds or etc.. but those are more complicated for what you are trying to do here). So that is why your console.log() inside the success callback works, and the one outside will probably never work.

Variable Undefined Scope

4 Answers4