Question

I’m working on a jQuery plugin, but am having some trouble getting my variables properly scoped. Here’s an example from my code:

(function($) {

$.fn.ksana = function(userOptions) {
    var o = $.extend({}, $.fn.ksana.defaultOptions, userOptions);

    return this.each(function() {
        alert(rotate()); // o is not defined
    });
};

function rotate() {
    return Math.round(o.negRot + (Math.random() * (o.posRot - o.negRot)));
};

$.fn.ksana.defaultOptions = {
    negRot: -20,
    posRot: 20
};

})(jQuery);

I’m trying to get the private function rotate to be able to see the o variable, but it just keeps alerting ‘o is not defined’. I’m not sure what I’m doing wrong.

Answer 1

The o variable is locally scoped inside the $.fn.ksana function, in order to allow the rotate to reach it, you should either:

• Simply pass the o variable to it as an argument.
• Define that function within ksana.
• Define o in the outer scope.

IMO, passing it as an argument is enough clean:

(function($) {
  $.fn.ksana = function(userOptions) {
    var o = $.extend({}, $.fn.ksana.defaultOptions, userOptions);

    return this.each(function() {
        alert(rotate(o)); // pass o
    });
  };

  function rotate(o) { // use passed object
    return Math.round(o.negRot + (Math.random() * (o.posRot - o.negRot)));
  }
//...
})(jQuery);