CODEWITHSUNDEEP
javascript
HelloWorld
HelloWorld

Reputation: 11247

How to eliminate global variables -- common patterns

I have fallen into a 'comfort' zone in my code and use this pattern a lot but I realize it isn't the best practice, how can I go about creating this function without relying on a global variable?

  var map;
  function initialize_gmaps() {
    var myLatlng = new google.maps.LatLng(47.705786,-80.007672);

    var mapOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // To add the marker to the map, use the 'map' property
    // var marker = new google.maps.Marker({position: myLatlng,map: map,title:"Hello World!"});
  }

As you can see var map is a global variable. Is it best practice to return the 'map' var whenever I need to reference map? Is there a better pattern for this? Here is what I am thinking...

      function initialize_gmaps() {
        var myLatlng = new google.maps.LatLng(47.705786,-80.007672);
        var map;
        var mapOptions = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        return map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        // To add the marker to the map, use the 'map' property
        // var marker = new google.maps.Marker({position: myLatlng,map: map,title:"Hello World!"});
      }

The main problem I see with this pattern is that I am re-assigning var map every time I call function initialize_gmaps() which isn't optimal.

What is a better pattern for this scenario? Is there a name for this type of pattern in JS, I imagine this is a common problem.

Upvotes: 0

Views: 110

Answers (2)

jfriend00
jfriend00

Reputation: 707218

There is no need for the map variable in initalize_gmaps(). It's a temporary local variable that simply isn't needed. You can just do this:

  function initialize_gmaps() {
    var mapOptions = {
      center: new google.maps.LatLng(47.705786,-80.007672),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  }

In fact, even the mapOptions variable isn't needed either, though I can see a reason to use it just for readability (personal preference). But, you could even do this:

  function initialize_gmaps() {
    return new google.maps.Map(document.getElementById("map-canvas"), {
        center: new google.maps.LatLng(47.705786,-80.007672),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  }

There are many useful reasons to use local variables, but a one-time use variable like your map variable that you are just immediately assigning and returning really has no utility and just creates a bit of extra work for the interpeter.

You may also analyze why you're recreating the map multiple times? Perhaps it would be better to just save the initial map you create and use that one repeatedly rather than creating a new one each time. You'd have to show much more context of your code (how and where the returned map object is used) for us to advise further on that topic.

Upvotes: 1

Bergi
Bergi

Reputation: 664307

Is it best practice to return the 'map'

Yes. There's not need for a local map variable in the initialize_gmaps function though. Just do

return new google.maps.Map(…);

I am re-assigning var map every time I call function initialize_gmaps()

Why would you initialize the map multiple times?

You should make a local variable for the map in the section where you're adding the markers to the map. This could look like

$(function() { // assuming jQuery
    var map = initialize_gmaps();
    var marker = new google.maps.Marker({position: myLatlng,
                                         map: map,
                                         title: "Hello World!"});
    …
});

Upvotes: 1

Related Questions