Variable scoping in Jquery/Javascript

Question

I have the following code:

var ids = new Array(5);
$(function(){
html5sql.process(sql, 
    function(transaction, results, rowsArray){
        for(var i = 0; i < rowsArray.length; i++){
            ids[i] = rowsArray[i].ID;
                            console.log(ids[i]); //returns the actual value for i
        }
    },
    function(error, statement){
              console.log("Error: " + error.message);       
            }
);
console.log(ids[0]); //returns undefined
});

As you can see, the print out inside the for loop prints the correct value. On the other hand, when I print outside the function I get undefined. What is the problem with the scoping? How can I get the actual value of the array outside the function?

Thanks

Welcome to the wonderful world of async! You can't do that. — SLaks
– SLaks, Commented Jan 5, 2012 at 1:53
Those functions are callbacks. They are not invoked immediately. — Šime Vidas
– Šime Vidas, Commented Jan 5, 2012 at 1:56
How can I solve this problem. Can anyone please explain to me what is happening? — locorecto
– locorecto, Commented Jan 5, 2012 at 1:58
You are being told that the call to html5sql.process() runs asynchronously. The call to console.log() occurs immediately afterward and before any values are assigned to ids. You need to delay the call to console.log until processing is finished (and values have been assigned). I.e. you have a timing issue, not a scoping issue. — RobG
– RobG, Commented Jan 5, 2012 at 2:20

Šime Vidas · Accepted Answer · 2012-01-05 02:18:55Z

3

var ids = [];

$( function () {

    html5sql.process( sql, function () {

        // LINE A: you are populating your array here

    });

    // LINE B: the array is still empty here

});

LINE A does appear above LINE B in the source code, but that doesn't necessarily mean that it executes sooner. That is because LINE A is inside a function expression which is passed into the process function. This process function will invoke that function expression at some time in the future.

So, basically, LINE B is executed immediately, and LINE A is executed at some point in the future. The function expression is probably bound (as a handler) to a SQL-related event.

answered Jan 5, 2012 at 2:18

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

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

8 Comments

RobG Over a year ago

I think your explanation is a bit flawed. The code is executed in order, but the function called by html5sql() is being run asynchronously (apparently) so it hasn't assigned values to ids when the call to console.log is made immediately afterward.

Šime Vidas Over a year ago

@RobG Could you be more specific? What statement from my answer is problematical?

RobG Over a year ago

The part that says LINE A does appear above LINE B in the source code, but that doesn't necessarily mean that it executes sooner. The code is executed in sequence, but the function it calls is asynchroonous so it's still executing when the next line is called.

Šime Vidas Over a year ago

@RobG My statement is correct. LINE A is not executed immediately, and LINE B is executed immediately. Therefore LINE B is executed sooner (in time) than LINE A. As a matter of fact, from the code provided by the OP, he have no guarantee that LINE A is executed at all. When the statement html5sql.process(...); executes, the function expression is passed into the process function - the function body of that function expression is not executed at this point. It's up to the process function to decide if it wants to invoke that function immediately...

Šime Vidas Over a year ago

...or bind it as an event handler so that it's invoked when an event triggers at some point in the future. Therefore, my statement - "LINE A does appear above LINE B in the source code, but that doesn't necessarily mean that it executes sooner (in time)" - is correct.

|

Collectives™ on Stack Overflow

Variable scoping in Jquery/Javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related