Return value wrapped around anonymous function in javascript

Question

Could someone explain to me what's wrong with checkX()'s scope? What I'm suspecting that's wrong is the anonymous function somehow blocks it but I'm not sure how to bypass that.

storage = chrome.storage;

function checkX(){
    var x = false;

    storage.sync.get(function(data){
        if(data.x == true){
                x = true;
                console.log(x); // << x : true
        }
    });

            console.log(x); // << x : false
    return x;
}

console.log result order:

x : false
x : true

After the edit, this seems to be the typical asynchronous issue. — kapa
– kapa, Commented Jan 30, 2013 at 8:22

Elias Van Ootegem · Accepted Answer · 2013-01-30 11:25:34Z

1

2 things that might -and probably will- throw you:

JavaScript is case-Sensitive
the get method, as used by you is asynchronous, your IIFE returns prior to the passed callback function is being executed, so it'll return the value of x before the callback changes it anyhow.

Edit:
The get method is just a getter, fair enough, however there is a major difference between chrome.storage.sync.get, which gets the data using google sync, and chrome.storage.local.get, which is (almost) the same thing as using the localStorage object, with the added benefits of events. At least, that's what Google's docs are telling me at first glance?

From the comments below:
The issue here is how and when JS calls the callback function. Even though the getter the OP uses is getting local data, the IIFE has to return first, before JS, being single threaded, can call the callback. That's why the IIFE returns false.

edited Jan 30, 2013 at 11:25

answered Jan 30, 2013 at 8:17

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

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

9 Comments

Adonis K. Kakoulidis Over a year ago

I accidentally capitalized X, thats not the actual issue. I also added some information about storage.sync in my question

Elias Van Ootegem Over a year ago

@AdonisK.: Well than, the added info actually confirms that the issue is the asynchronous character of the get method, as I said in my second point: the IIFE is invoked, calls the get method, and returns, when the get method receives an answer, it calls the callback function. By that time, the IIFE has long since returned...

Adonis K. Kakoulidis Over a year ago

but the get function is just a getter function, it doesn't involve the HTTP GET method.

Elias Van Ootegem Over a year ago

@AdonisK.: That doesn't matter, you call a function, and pass a callback to it as an argument. Since JS is single threaded, that callback will be moved to the back of the queue, prior to it being called! the IIFE just HAS to return first. A callback is basically saying Do this, when I call-you-back. For now, I'm going to finish this, first Where the data is coming from is completely irrelevant. That's why, in a callback, the called context (the this reference) will point to the global object, it's called in some other time, some other place!

Elias Van Ootegem Over a year ago

@AdonisK. I wasn't talking about sync.get I'm talking about how JS deals with callbacks. The get method is called in the IIFE's scope, so it's called immediatly. A callback is a function call that is called as soon as possible, but since JS is single threaded, and the IIFE is yet to return, the callback has to wait it's turn. What part of this is unclear? JS can't call a callback that is passed to another function that is called witin another function prior to the functions that are called have returned. Does it log true and then false, or the other way around?

|

fmsf · Accepted Answer · 2013-01-30 08:23:26Z

0

Javascript is case sensitive. What you are doing is creating a global variable x which is true, while the local variable X remains false.

storage = chrome.storage;

function checkX(){
    var X = false;

    storage.sync.get(function(data){
        if(data.x == true){
            x = true;  <--- global variable
        }
    });

    return x;
}

Another issue would be if the storage.sync.get runs async from the "checkX", which would mean that first you return x and only later on (after you have returned it) will your function be executed. This will happen for sure if storage.sync.get is an ajax call.

edited Jan 30, 2013 at 8:23

answered Jan 30, 2013 at 8:17

fmsf

37.2k49 gold badges155 silver badges196 bronze badges

1 Comment

Adonis K. Kakoulidis Over a year ago

I accidentally capitalized X, thats not the actual issue. I also added some information about storage.sync in my question

Collectives™ on Stack Overflow

Return value wrapped around anonymous function in javascript

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related