How do I make a Global Variable in JavaScript?

Question

So I would like for dashboard to be able to be modified inside one function, then be displayed in another function. Kind of like a public variable in java. Is this possible? See my code below.

var dashboard = new Array();
function init() {
    getXML(); //1.  goto get XML 2.// XML Parser
    displayXML();
}

function getXML() {
    console.log("getXML REACHED");
    $.ajax({
        type: "GET",
        url: "file:///H:/ModelDisplayV1/ModelDisplayV1/files/dashboard.xml",
        dataType: "xml",
        success: xmlParser
    });
}

function xmlParser(xml) {
    dashboard[0] = 7;
    console.log(dashboard);
});
}

function displayXML() {
    console.log("display xml function reached!!!");
    console.log(dashboard);
}

When I finally try and get the console.log(dashboard) it says dashboard is undefined. I thought by declaring dashboard outside of my functions it would be global. How do I make it so I can alter the contents of dashboard in one function and retrieve them in another function?

I am more familiar with Java as opposed to Javascript.

Answer 1

The ajax call is asynchrous, so the displayXML() function is called in the init() method before dashboard is actually filled. So do this instead:

var dashboard = new Array();
function init() {
    getXML(); //1.  goto get XML 2.// XML Parser
}

function getXML() {
    console.log("getXML REACHED");
    $.ajax({
        type: "GET",
        url: "file:///H:/ModelDisplayV1/ModelDisplayV1/files/dashboard.xml",
        dataType: "xml",
        success: xmlParser
    });
}

function xmlParser(xml) {
    dashboard[0] = 7;
    console.log(dashboard);
    displayXML();
});
}

function displayXML() {
    console.log("display xml function reached!!!");
    console.log(dashboard);
}

Answer 2

You need to pass a context to $.ajax()

$.ajax({
    type: "GET",
    url: "file:///H:/ModelDisplayV1/ModelDisplayV1/files/dashboard.xml",
    dataType: "xml",
    context: this,
    success: xmlParser 
});

Answer 3

There's only two kinds of scopes in javascript - global and function. If it's not declared inside a function, it's global. If it's not declared using var, it's also implicitly global.

Answer 4

The var keyword declares a variable as local, otherwise you can omit it and it will make it global.

The other option is to insert it into the window object like so:

window.dashboard = new Array();

This is the preferred method for insert variables into the global scope.

Also blah blah blah about not abusing global variables that you probably know.

Answer 5

if you want Java-like class semantics in javascript look at using the Revealing Module pattern.

http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript

Getting in the habit of correctly organizing your javascript code from the beginning will save you many headaches.