Better writing JS - from general variables to object

Question

This might be a dumb question for you advanced developers.

Below is a script on my own website that I want to modify, in order to avoid declaring same variables in each function. I want to avoid declaring variables in the main script structure.

Below code works, still wanted to know if there is a more elegant way to do this.

As Answered below, it's best to enclose everything in an object.

var var1 = document.getElementById("div1");
var var2 = document.getElementById("div2");

function foo1(){
div1.style.display = "none";
}

function foo2(){
div2.style.display = "block";
}

Answer 1

You can enclose your variables (and functions) in a closure to restrict your scope, although you then need someway to make those functions callable outside of that closure, e.g.:

(function() {
    var a;

    function increment() {
        a += 1;
    }

    function decrement() {
        a -= 1;
    }

    window.increment = increment;
    window.decrement = decrement;
})();

It's pretty ugly, though. It would be better to enclose the whole thing as an object, e.g.:

function Counter() {
    var count = 0;

    return {
        increment: function() {
            return count++;
        },
        decrement: function() {
            return count--;
        },
        value: function() {
            return count;
        }
    };
};

Answer 2

var var1 = "hello";
var var2 = "hello2";

function foo1(){
    var1 += "world";
    var2 += "world2";
}
function foo2(){
    var1 += "2world";
    var2 += "2world2";
}

try that. you had double function keyword , and you forgot braces to close

Answer 3

In order to avoid writing those as global variables, put them into a global variable. :)

Before you downvote, let me explain.

Javascript really doesn't have the concept of namespaces, but most big Javascript libraries need to have functions and data accessible to all the Javascript running on a page. They do this by creating one Javascript object and then putting everything in it. jQuery does it with a jQuery object, Google with their google.maps object and you can too.

For your code, create a myApp object (should be a unique name for your application) like so:

myApp = myApp || {}; // No var keyword here, so it's global
myApp.var1 = "hello";
myApp.var2 = "hello2";

function foo1(){
    var var1 = myApp.var1 + "world foo1";
    var var2 = myApp.var2 + "world2 foo1";
}

function foo2(){
    var var1 = myApp.var1 + "world foo2";
    var var2 = myApp.var2 + "world2 foo2";
}

An important thing to remember is to be very careful what code in your application writes to the myApp object. It is still a global and access controls need to be enforced by good design because the code isn't going to do it for you.