Why does this global Javascript variable behave differently inside and outside of a function?

Question

I'm trying to understand why my global variable 'imageUrl' behaves differently inside and outside of the function 'genericOnClick()'

var imageUrl

var id = chrome.contextMenus.create({
    "title": "Add to JC Queue",
    "contexts": ["image"],
    "onclick": genericOnClick
});

function genericOnClick(info) {
    imageUrl = info.srcUrl;
    console.log(imageUrl);
    chrome.tabs.create({
        url: chrome.extension.getURL('dialog.html'),
        active: false
    }, function (tab) {
        // After the tab has been created, open a window to inject the tab
        chrome.windows.create({
            tabId: tab.id,
            type: 'popup',
            focused: true
        });
    });
}

console.log(imageUrl);

Please let me know where I am going wrong:

1. Declare imageUrl as a global variable
2. Declare id as a global variable and run a function OnClick()
3. Log imageUrl to the console inside the function (it displays fine)
4. Log imageUrl to the console after the function runs (it is undefined)

Answer 1

When the second console.log is run, the function has not been called, therefore the variable hasn't been assigned anything yet. However, inside the function it has received a value, and that's what you see.

Answer 2

好吧，当您在调用函数之前记录日志时， imageURL 是 undefined ，代码末尾的日志在调用函数之前运行。

Answer 3

The last line ( console.log(imageUrl); ) runs almost immediately after you declare imageUrl without a value, so it is undefined at that point.

Try setting imageUrl to an initial value, and you'll see that that value will get logged.