JavaScript function returns undefined except when debugging

Question

When trying this simple code:

function create_folder(name, parent_ID) {
    var BM_folder = "";
    chrome.bookmarks.create({title : name, parent_id : parent_ID }, function (new_folder) {
        BM_folder = new_folder;
    });
    console.log("create folder in id   : " + BM_folder.id);
    return BM_folder.id;
}

I get undefined as output, but when I debug it works fine and I get the real bookmark ID. I have similar problems in more functions, I guess it's the same problem.

EDIT #1: fixed the vars, my real function has full strings, I simply can't post that way.

EDIT #2: thanks Marco Bonelli , is there a way to turn this into sync, so that I'll be able to use normal oop?

Answer 1

There are several problems in your code:

1. First of all, that function cannot work... you're using a hypen ( - ), and variable/function names cannot contain hypens in JavaScript, so change it in something else, maybe create_folder or createFolder . That's the same for your variable BM-folder , and parent-ID . Call them BMFolder and parentID .

2. Secondly, you are creating the object to pass to chrome.bookmarks.create() in the wrong way: parent-ID is both wrong and undefined. You should do: chrome.bookmarks.create({title: name, parentID: parentid}) .

3. Inside your function, you're calling the chrome.bookmarks.create() method, which is asynchronous : this means that the code is processed separately from the body of your function, and when the method has finished working, it will call the callback function, which you provide as second argument. Basically when calling chrome.bookmarks.create() you have to wait until it's finished to continue, because if you try to access the BMfolder.id variable before the callback gets called it will obviously be undefined.

Now, to summarize what I said above, I'll show the right code for to achieve you're trying to:

function createFolder(name, parentid) {
    chrome.bookmarks.create({title: name, parentID: parentid }, function (newFolder) {
        console.log("Created the folder with ID: " + newFolder.id);
        goOn(newFolder);
    });
}

function goOn(BMFolder) {
    console.log('Here is the folder: ', BMFolder);
    // do something...
}

You cannot use return BMFolder.id , because your function is asynchronous, so the only thing you can do to know that the bookmark folder has been created is to call another function to continue. For example, you can name it goOn() .

---

EDIT:

Is there a way to turn this into sync, so that I'll be able to use normal oop?

Unfortunately you cannot turn an asynchronous function into a synchronous one . Chrome extensions' methods are only asynchronous , therefore you have to work on that. By the way, working asynchronously is much more efficient than working synchronously, and you should get used to this programming style, because (as said before) Chrome extensions only work asynchronously, and so do many other JS frameworks and APIs.