JavaScript Globals alternatives

Question

I'm using a framework (meteor, but doesn't matter for the question I guess) which provides separate functions..

My problem is I realize I am using more and more global variables in order to make them accessible between these functions. For example the map object:

Meteor.startup(function () {
  map = L.map('map_canvas').locate({setView: true, maxZoom: 21});
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
});

I need to access map everywhere to manipulate my maps(with the use of Leaflet) For example:

Template.messages.events({
  'click .delete-message': function (e,t) {
    e.stopPropagation();
    removeItem(e.target.id);
  },
  'click .message': function (e,t) {
    console.log('event clicked');
    map.setView([e.target.getAttribute('data-lat'),e.target.getAttribute('data-lng')], 16);
  }
});

I have the same problem when I want to create a marker object that I want to use in different places...

Is it that Meteor is built this way, or are there more proper/clean JS alternatives rather than making stuff global?

edit Thanks for your answers, could you please add an example of code using for example one of the patterns you mention but based on my code? This way I could understand it much better.

Answer 1

There are many ways to make js variables and functions not global.

1. You can use an object as a hash map and access your variables with dot notation. The object is still global but at least you fewer global names that could conflict.
2. You can use namespace.js.
3. You could use pseudo-oo style using closures.
4. You could use coffeescript.
5. Aside from namespace.js, a lot of frameworks like dojo.js allow for modules.
6. Probably many other options.

Dojo.js and I think require.js encourage modular design. (among others) Namespace is pretty easy to include and use and may solve your problem with the smallest amount of code change. I've used it in the past to go from global to more OO style.

Option 1, Hashmap

var GKApp = new Object();
GKApp.map = blah;
GKApp.size = 1;
GKApp.doSomethingWithMap = function() {
    GKApp.map.blah();
}
// Now the only global is GKApp.
// Later, make the call. 
GKApp.doSomethingWithMap.call();

Option 3, Closures

You can use a pure javascript closure as shown below or wrap this in a define using dojo.js or require.js.

GKApp = function(pmap) {
    // dbg.log("GKApp constructor.");
    // You can consider the closure to 'begin' here.

    // ********************************************************
    // @private variables:
    // ********************************************************
    var map = pmap;

    /**
     * @privileged method which has access to variables in the closure.
     * These variables are not available outside of the closure.
     * An anonymous function has access to variables in the outer scope or, the closure.
     */
    this.doSomethingWithMap = function() {
        map.blah();
    };
};

// Later, instantiate an object and use it. 
var gkApp = new GKApp(map);
gkApp.doSomethingWithMap();