Javascript variable scope

Question

I'm trying to make a simple function with js & jquery but I can't get this to work.

From what I understand, when I declare a variable without var it becomes global but I can pass a variable from a jquery callback to my main function.

   function fetchEvents(start,end){
        ret = [];
        $j.getJSON("index.php?page=agenda_google_ajax&action=list&start="+start+"&end="+end,function(data){
            console.log(data); // works ok
            ret = data;
        });
        console.log(ret); // equals [] :'(
        return ret;
    }

you might want to read up on javascript async

KJYe.Name
– KJYe.Name

2011-03-29 14:40:44 +00:00
Commented Mar 29, 2011 at 14:40 — KJYe.Name
– KJYe.Name, Commented Mar 29, 2011 at 14:40
Does ret variable needs to be an array?

yojimbo87
– yojimbo87

2011-03-29 14:41:38 +00:00
Commented Mar 29, 2011 at 14:41 — yojimbo87
– yojimbo87, Commented Mar 29, 2011 at 14:41

McStretch · Accepted Answer · 2011-03-29 14:44:46Z

2

From what I understand, when I declare a variable with var it becomes global..

The opposite is true. When you omit var, the variable becomes global. Always use var!

From the Google JavaScript Style Guide:

When you fail to specify var, the variable gets placed in the global context, potentially clobbering existing values. Also, if there's no declaration, it's hard to tell in what scope a variable lives (e.g., it could be in the Document or Window just as easily as in the local scope). So always declare with var.

As for your problem with console.log(ret); // equals [] :'(...

$j.getJSON() is not a synchronous method call. The method runs asynchronously, so your code effectively says:

ret = [];
console.log(ret);

If you need to use the data returned from your getJSON() after it is executed, you can call a method within your callback function:

$j.getJSON("index.php?page=agenda_google_ajax&action=list&start="+start+"&end="+end,
    function(data){      // this is your callback function
      console.log(data); // works ok
      doSomething(data); // process the returned JSON
    }
});

edited Mar 29, 2011 at 14:44

answered Mar 29, 2011 at 14:38

McStretch

20.7k2 gold badges38 silver badges40 bronze badges

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

2 Comments

KJYe.Name Over a year ago

@Paté create a global function call test() and within that function call console.log(ret) now in your getJSON callback function call test() and see what you get

McStretch Over a year ago

@Paté - I added a code example to demonstrate how you might want to use the returned data.

James Kyburz · Accepted Answer · 2011-03-29 14:45:38Z

2

Your problem is that $.getJSON uses a callback so when your fetchEvents function is called it returns before the callback is executed.

what you want to do is in the callback populate/do the stuff you want to do.

as you have pointed out console.log works ok in the callback

answered Mar 29, 2011 at 14:45

James Kyburz

14.6k1 gold badge34 silver badges33 bronze badges

Comments

JaredPar · Accepted Answer · 2011-03-29 14:45:46Z

1

It seems like you are confusing 2 issues here.

The first is that var does not make a variable gloabl. The opposite is true. That is omitting var will make a variable global.

The second is the getJSON callback method does not execute synchronously. It will execute once the http request is completed. So there is no expectation that ret will be set to the value immediately after making the getJSON call.

answered Mar 29, 2011 at 14:45

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

Comments

jimy · Accepted Answer · 2011-03-29 14:38:03Z

0

try adding var to var ret = [];

answered Mar 29, 2011 at 14:38

jimy

4,9183 gold badges37 silver badges52 bronze badges

2 Comments

jimy Over a year ago

@pate you need to make you request async: false

KJYe.Name Over a year ago

pate will have to use .ajax and not .getJSON to set async: false

James Kyburz · Accepted Answer · 2011-03-29 14:40:54Z

0

adding var to it does not make it global, omitting it makes it global it is added to the global window object.

answered Mar 29, 2011 at 14:40

James Kyburz

14.6k1 gold badge34 silver badges33 bronze badges

Comments

Aleadam · Accepted Answer · 2011-03-29 14:45:48Z

0

That's because ret is evaluated BEFORE you get a response from ajax. Try

function fetchEvents(start,end){
        $j.getJSON("index.php?page=agenda_google_ajax&action=list&start="+start+"&end="+end,function(data){
            console.log(data); // works ok
            var ret = data
            whatsRet (ret);
        });
        }

function whatsRet (ret) {
        console.log(ret); // equals data :)
}

answered Mar 29, 2011 at 14:45

Aleadam

40.4k9 gold badges88 silver badges108 bronze badges

Comments

masylum · Accepted Answer · 2011-03-29 14:52:38Z

The problem you have is about writing asynchronous code.

When you call getJSON, the inner function will not be called until getJSON returns something. This means that code is no longer executed top-down, your program continues the execution even when getJSON is still getting the data.

You should provide a callback instead of a return:

var fetchEvents = function (start, end, callback) {
  $j.getJSON("index.php?start="+start+"&end="+end, function (data) {
    callback(data);
  });
};

// Now you can use fetchEvents which will be asynchronous too
fetchEvents(0, 10, function (data) {
  console.log(data);
})

You can simpify fetchEvents event more by passing the callback directly to getJSON.

var fetchEvents = function (start, end, callback) {
  $j.getJSON("index.php?start="+start+"&end="+end, callback);
};

PD: I simplified the query for readability.

Collectives™ on Stack Overflow

Javascript variable scope

7 Answers 7

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related