variable scoping in javascript

Question

My code is as follows:

jQuery(document).ready(function() {
        var pic = 0;
        FB.init({appId: '1355701231239404', status: true, cookie: true, xfbml: true});
        FB.getLoginStatus(function(response) {
        if (response.session) {
            pic = "http://graph.facebook.com/" + response.session.uid + "/picture";     
            alert(pic);
         } else {
            window.location = "index.php"
         }       
        });

    });
    </script>

The issue is that the pic inside my if statement has a different scope with the one I declared above? Why and how do I make them the same?

What I want is to use this var pic (the one that has been assigned by the if statement) inside the body of my html. I will have another script inside the body, a document.write that uses this pic variable.. as of now when I do a document.write it always gives me 0, as if it's not assigned inside the if statement

@user721937 I know that you've found stackoverflow interesting because you've asked several questions in the last 24hrs. Welcome to SO! It's important to us that you review all your questions and accept the answers that solved them. Thank you. — karlphillip
– karlphillip, Commented Apr 24, 2011 at 18:07

Quentin · Accepted Answer · 2011-04-24 17:59:35Z

3

The issue is that the pic inside my if statement has a different scope

No, it isn't. JavaScript scope is by function. var pic = 0; scopes pic to the anonymous function passed to ready(). The anonymous function passed to getLoginStatus() doesn't use var at all, so the scope of pic there is the same.

(Since you didn't say what outcome you got or what outcome you were expecting, it is hard to say what the solution to your problem actually is)

answered Apr 24, 2011 at 17:59

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

adit Over a year ago

I will be using the pic variable inside the body of my html..so how do I get this? as of now I always get pic as 0, while what I want pic to have some value assigned in the if statement

Quentin Over a year ago

The variable is scoped the the function you pass to ready and isn't available outside it. You could get around that using a global (which is ugly) but you would still have a timing issue. You send off a request to Facebook for some data, but it hasn't been processed before the code you put in the body (which you should have discussed in the original question) runs. You need to do all logic (that depends on the Facebook data) the in the callback function you pass to getLoginStatus()

Daniel Earwicker · Accepted Answer · 2011-04-24 18:11:33Z

1

But there is only one pic in that snippet. So the issue you describe doesn't exist. What problem are you experiencing? How does the code misbehave compared with what you expect?

Update

Okay, your actual problem is that you're expecting pic to be updated so you can use the value of it elsewhere. But consider:

FB.getLoginStatus(function(response) { ... });

The reason that function executes a callback, instead of returning response as a return value, is because it is asynchronous. It make take a while to get the response, and so it doesn't execute the callback immediately. So your other piece of code is probably executing before that happens, i.e. before pic has been properly initialised with a value.

edited Apr 24, 2011 at 18:11

answered Apr 24, 2011 at 17:58

Daniel Earwicker

117k38 gold badges209 silver badges289 bronze badges

1 Comment

Daniel Earwicker Over a year ago

@user721937 - no, never. The point of the callback is to provide a location to take actions that depend on the result of the previous call - just put the code that needs pic in the callback.

Collectives™ on Stack Overflow

variable scoping in javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related