views:

291

answers:

2

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?

+6  A: 

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);
         });
     });
 })();
olliej
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
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
Which doesn't work :PI'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?
rball
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.
olliej
+1  A: 

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.

pottedmeat
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
Instead of alert("PlaceId: " + placeId()); did you mean alert("PlaceId: " + selectPlace());?
rball