Can I use Javascript Closures here instead of a global variable?

Question

Current setup:

var placeId;
function selectPlace(place) {
    $('#selectPlace').html('Selected Place: <b>' + place.Name + '</b>');
    $('#map').hide(400);
    placeId = place.Id;
}

$(document).ready(function()
{
    $('#postMessage').click(function() {
        alert("PlaceId: " + placeId);
    });
});

Can/should I be using closures?

olliej · Accepted Answer · 2009-03-04 02:29:24Z

6

It seems a reasonable thing to do, based on the context, you can easily do it by substituting your code with a function expression a la:

 (function(){
     var placeId;
     // It looks like you want selectPlace to be a global function?
     // hence i'm using assignment of a function expression here
     selectPlace = function (place) { 
         $('#selectPlace').html('Selected Place: <b>' + place.Name + '</b>');
         $('#map').hide(400);
         placeId = place.Id;
     }

     $(document).ready(function()
     {
         $('#postMessage').click(function() {
             alert("PlaceId: " + placeId);
         });
     });
 })();

answered Mar 4, 2009 at 2:29

olliej

36.9k9 gold badges61 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rball Over a year ago

I just don't think I get it then (closures). I thought I could use them to essentially not have a var placeId and instead of something like selectPlace() return a place.Id instead.

rball Over a year ago

Something like: selectPlace = function (place) { $('#selectPlace').html('Selected Place: <b>' + place.Name + '</b>'); $('#map').hide(400); return place.Id; } $('#postMessage').click(function() { alert("PlaceId: " + selectPlace()); });

rball Over a year ago

Which doesn't work :P I'm also not sure how your example is better than my code? Not trying to sound like a butt, but I really just don't know. I'm not a javascript person so not sure how doing it this way would help or be better?

olliej Over a year ago

without full context of what you're doing i can't be sure of your intent, but the use of a closure in the case (that of the function expression) is to scope placeId, and thus prevent it from polluting the global scope.

pottedmeat · Accepted Answer · 2009-03-07 23:33:25Z

3

Based on your comments, it seems like what you're looking for is this:

function selectPlace(place) {
  if(!place){
    return selectPlace.placeId;
  }else{
    $('#selectPlace').html('Selected Place: <b>' + place.Name + '</b>');
    $('#map').hide(400);
    selectPlace.placeId = place.Id;
  }
}

$(document).ready(function(){
  $('#postMessage').click(function() {
    alert("PlaceId: " + selectPlace());
  });
});

This isn't using a closure, it just stores the last assigned ID on the function object. Then you'd return the value if they don't use the function as a setter. If you wanted to use a closure to do the same thing, it would look a lot like the example above:

(function(){
  var placeId;

  window.selectPlace = function(place) {
    if(!place){
      return placeId;
    }else{
      $('#selectPlace').html('Selected Place: <b>' + place.Name + '</b>');
      $('#map').hide(400);
      placeId = place.Id;
    }
  }
})();

By the way, the easiest way to spot a closure is if a function has variables in it that haven't been declared with var inside of the current function, but have been in some other function it sits inside. As you can see above, the variable placeId isn't declared inside of the selectPlace function, meaning that the selectPlace function is a closure that uses the placeId variable.

edited Mar 7, 2009 at 23:33

answered Mar 4, 2009 at 7:15

pottedmeat

3,4411 gold badge20 silver badges9 bronze badges

2 Comments

rball Over a year ago

Very cool. Yes, I'm guessing I wasn't needing a closure, just trying to steer away from using a global (heard they was bad). No idea why I couldn't think of this but thanks for adding it!

rball Over a year ago

Instead of alert("PlaceId: " + placeId()); did you mean alert("PlaceId: " + selectPlace());?

Collectives™ on Stack Overflow

Can I use Javascript Closures here instead of a global variable?

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related