Javascript Global Variable is empty

Question

I have a function and created a global variable.

The alert inside the function is alerting the result as expected but the variable is showing nothing.

How can I fix this?

Here's the code:

var connectionResult = '';

function checkConnection() {
    var networkState = navigator.connection.type;

    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.CELL]     = 'Cell generic connection';
    states[Connection.NONE]     = 'No network connection';

    alert('Connection type: ' + states[networkState]);

    var connectionResult = states[networkState];
};

checkConnection();

alert(connectionResult); // Returns Nothing

Answer 1

The problem is that you are creating a local variable named connectionResult in the checkConnection rather than assigning to the global connectionResult.

Replace

var connectionResult = states[networkState];

with

connectionResult = states[networkState];

And it will work.

To expand on TJ Crowder's comment below, you can make this function a little more efficient, since you are declaring what is essentially a constant over and over again. You can change the code as follows:

var NetworkStates = {}; // this never changed in the old function, so refactored it out as a "constant"
NetworkStates[Connection.UNKNOWN]  = 'Unknown connection';
NetworkStates[Connection.ETHERNET] = 'Ethernet connection';
NetworkStates[Connection.WIFI]     = 'WiFi connection';
NetworkStates[Connection.CELL_2G]  = 'Cell 2G connection';
NetworkStates[Connection.CELL_3G]  = 'Cell 3G connection';
NetworkStates[Connection.CELL_4G]  = 'Cell 4G connection';
NetworkStates[Connection.CELL]     = 'Cell generic connection';
NetworkStates[Connection.NONE]     = 'No network connection';

function getConnectionState() {
    return NetworkStates[navigator.connection.type];
}

Now wherever you need the connection state you can just call getConnectionState rather than having a global variable floating around.

Answer 2

var connectionResult inside checkConnection creates a new variable called connectionResult .

This "inner" variable is only in scope inside checkConnection . It hides, or "shadows" the one that you intend to use: any reference to connectionResult inside checkConnection uses it instead of the "outer" variable that you expect.

Just remove var and you'll use the existing connectResult :

connectionResult = states[networkState];

Answer 3

var connectionResult = states[networkState];

creates a new variable connectionResult within the scope of the function which is completly unrelated to the global variable connectionResult

Just use

connectionResult = states[networkState];

in order to assign the network state to the global variable