Reassignment of variables not declared with var within a callback function

Question

Hey guys so I am just trying to understand scope of variable with and without using var in javascript and I understand so far that if a variable is declared without var that in javascript it will go up in scope until it finds a reference to that variable and if it hits the global scope then it will create the variable there.

My question is that in this code the output of this is 0 0 1 but I dont understand where my logic is going awry.

In my head first found is declared to be 0 and since its not declared with var that it will now be a global variable because as it goes up scope it wont be found. Currently found is 0.

Then it will print after the first if statement. So we are at 0.

Then, in the get current position when it says found = 1, wont it go up scope until it sees found outside that callback function in the getMyLocation function and reassign found to 1?

Then I assume it would now print 1 then once it's outside that code block then print 1 again to get 0 1 1. I understand what I am saying is wrong I just dont know where.

 <script> function getMyLocation() { found = 0; if (navigator.geolocation) { console.log(found); navigator.geolocation.getCurrentPosition(function(position) { found = 1; console.log(found); }); } console.log(found); } </script> 

Answer 1

See, Js is single threaded. So, it is managing tasks as asynchronous by event loop( video which explains what is event loop ). you are giving the callback for the getCurrentPosition. So, I guess it is a asynchronous function. it will execute after your third console. So, you are confused with the order. I clarified the order in your code. think that's way will help you to understand what happens here. This problem is not with the scoping.

 <script> function getMyLocation() { found = 0; if (navigator.geolocation) { console.log(found); // order ::: 1 navigator.geolocation.getCurrentPosition(function(position) { found = 1; console.log(found); // order ::: 3 }); } console.log(found); // order ::: 2 } </script> 

Answer 2

Here is a breakdown of what's happening:

• The first console.log() prints the value of "found" as is. Prints: 0

• The call to navigator.geolocation.getCurrentPosition() expects a success handler function as the first argument. The function you pass to it will be called asynchronously, ie, whenever there is a response. So there is nothing being printed here yet.

• We get to the third console.log() statement which will print the value of "found" which is still 0 (No response from the previous stage yet). Prints: 0

• The asynchronous call resolves from stage 2 and updates the value of "found" to 1, then prints it. Prints: 1

So, the overall output is 0 0 1

PS: It's normally considered a bad idea to use variables without declaring them and will not work if 'use strict' is present at the top of the page.