How can I make the variable newUser defined inside a function global?

Question

I send the variable newUser from options.html to background.html with chrome.extension.getBackgroundPage() like this

document.getElementById("save").addEventListener(
    "click", function ()
    {
        var newUser = document.getElementById("getEmail").value;
        var bkg = chrome.extension.getBackgroundPage();
        bkg.saveNewUser(newUser);
        console.log("newUser " + newUser);
    } , false)

In background.html I have

function saveNewUser (newUser)
{
    newUser = newUser; //this should be global?
    console.log("newUser from options page " + newUser);
}

console.log("newUser from options page " + newUser);

but newUser is local to the function. My understanding is that if a variable is saved inside a function without the keyword var it should be global. But in this case it is not. The console.log outside the function throws Uncaught ReferenceError: newUser is not defined error.

What am I doing wrong and how can I fix the scope to use newUser outside the function?

Thanks.

Edit

I tried the following in background.html but I still get newUser undefined error:

var extension_user

function saveNewUser (newUser)
{
    extension_user = newUser; //this should be global
    console.log("extension_user from options page " + extension_user);
}

console.log("extension_user from options page " + extension_user);

Update

I changed both pages to reflect the answers and comments but still outside the function the variable is undefined. What am I doing wrong?

options.html

document.getElementById("save").addEventListener(
    "click", function ()
    {
        var newUserEmail = document.getElementById("getEmail").value;
        var bkg = chrome.extension.getBackgroundPage();
        bkg.saveNewUser(newUserEmail);
        console.log("newUserEmail " + newUserEmail);
    } , false)

background.html

var newUser

function saveNewUser (newUserEmail)
{
    window.newUser = newUserEmail; //this should be global
    console.log("newUser from options page inside function" + newUser);
}

console.log("newUser from options page " + newUser);

You also might want to refactor your code to avoid the use of globals, in favor of returns and parameters. — Clement Herreman, Oct 26 '11 at 14:53
Your global scope console.log is probably being hit before the saveNewUser function is being called. Also, make sure that the scope where you're declaring the `newUser` var is the global scope. If it's not, there will be a difference between `newUser` and `window.newUser`. — Chris, Oct 26 '11 at 17:18

score 1 · Answer 1 · answered Oct 26 '11 at 14:51

1

If you want to save it as a global variable, you can either change the name of the variable in the function:

function saveNewUser (newUserVar)
{
    newUser = newUserVar; //this should be global?
    console.log("newUser from options page " + newUserVar);
}

console.log("newUser from options page " + newUser);

or you can use the window scope (which is the same as the global scope):

function saveNewUser (newUser)
{
    window.newUser = newUser; //this should be global?
    console.log("newUser from options page " + newUser);
}

console.log("newUser from options page " + newUser);

All global variables are essentially properties of the window object.

answered Oct 26 '11 at 14:51

Chris

1,040
2
14
23

This would still give a reference error as the variable does not exist when the global `console.log` is called. It only comes into existence when the `saveNewUser` function is called. – Aadit M Shah Oct 26 '11 at 14:58
1

right. I was under the impression that the global console.log was being called some time after the saveNewUser function was called. But yeah, if it might be possible that the global console.log could be called before the function, it would need to be handled as well. – Chris Oct 26 '11 at 15:04

score 0 · Accepted Answer · edited May 24 '23 at 17:24

0

The newUser variable does not exist in the global scope until the function saveNewUser is called. Thus it gives a reference error. Just declare the variable newUser in the global scope as var newUser;. That should solve the problem. Always use the var keyword when declaring variables. It's a good programming practice. Never declare global variables within local scopes. You already know why.

Edits:

Here's the code to clarify my answer:

var newUser; // new user declared as a global

function saveNewUser (newuser)
{
    newUser = newuser; // this should be global?
    console.log("newUser from options page " + newUser);
}

console.log("newUser from options page " + newUser); // no more reference error

edited May 24 '23 at 17:24

General Grievance

4,555
31
31
45

answered Oct 26 '11 at 14:38

Aadit M Shah

72,912
30
168
299

1

The problem here is shadowing. The local variable `newUser` shadows the global. Give your local a different name to avoid the conflict. (There is technically a way to unshadow a global variable, but you're better off just renaming to avoid the problem in the first place.) – Raymond Chen Oct 26 '11 at 14:39
There is no shadowing because there is no local variable. When you don't declare variables in JavaScript with the var keyword, the interpreter treats it as a global! – Aadit M Shah Oct 26 '11 at 14:41
1

The inbound parameter `newUser` is the local variable in this case. – Raymond Chen Oct 26 '11 at 14:49
Ah, yes. I didn't notice that. It's assigning the local variable to itself. My bad. – Aadit M Shah Oct 26 '11 at 14:51
I thought the names were different. @Zeynel why would you assign a variable to itself? – Aadit M Shah Oct 26 '11 at 14:52
1

@RaymondChen either way, the `console.log` outside the functional scope would give a reference error because the global variable `newUser` doesn't exist at the time of execution (assuming that he only changes the name of the parameter). He would still have to explicitly declare the variable in the global scope. – Aadit M Shah Oct 26 '11 at 14:56
Aadit, thanks for the answer. I updated the code but outside the function the variable `newUser` is still undefined. – Zeynel Oct 26 '11 at 15:11
That's because it's executed before the saveNewUser function. Hence the newuser is never saved. I don't know what you're trying to do, but remove the global console.log method call. You already have it within the local scope. Hope that helps. – Aadit M Shah Oct 26 '11 at 15:21
but I need to use newUser outside the saveNewUser function in global scope. So that's not really possible? – Zeynel Oct 26 '11 at 15:25
1

It is possible, but you'll need to defer the execution of the global code until the saveNewUser function saves the global variable. That's a bit complicated. It's better to simply place the global code within the saveNewUser function. Other functions will still be able to access the global newUser. – Aadit M Shah Oct 26 '11 at 15:32

How can I make the variable newUser defined inside a function global?

2 Answers2

Linked