title: Sharing variables in JavaScript Namespace
body: <p><strong>My Goal:</strong> To namespace my javascript to keep the global namespace clean. </p>
  
  <p><strong>My question:</strong> how do I share variables between methods in my JavaScript namespace?</p>
  
  <p>In my example I am extending and overwriting the behaviour of the ASP.net ModalPopupExtender. I want to know how I can share the <code>modalPopupStack</code> variable with <code>ModalPopupShowOverride</code> and <code>ModalPopupHideOverride</code> without making it global.</p>
  
  <p><strong>Relevant code:</strong></p>
  
  <pre><code>$(function () {
      if (Sys.Extended != undefined &amp;&amp; Sys.Extended.UI != undefined &amp;&amp; Sys.Extended.UI.ModalPopupBehavior != undefined) {
          MyPageMethods.ModalPopupShowOriginal = Sys.Extended.UI.ModalPopupBehavior.prototype.show;
          MyPageMethods.ModalPopupHideOriginal = Sys.Extended.UI.ModalPopupBehavior.prototype.hide;
          Sys.Extended.UI.ModalPopupBehavior.prototype.show = MyPageMethods.ModalPopupOverrides.ModalPopupShowOverride;
          Sys.Extended.UI.ModalPopupBehavior.prototype.hide = MyPageMethods.ModalPopupOverrides.ModalPopupHideOverride;
      }
  });
  
  var MyPageMethods = {
  
      ModalPopupShowOriginal: function () { },
  
      ModalPopupHideOriginal: function () { },
  
      ModalPopupOverrides: {
  
          modalPopupStack: new Array(),
  
          ModalPopupShowOverride: function () {
  
              var extender = this;
              var topElement;
  
              MyPageMethods.ModalPopupShowOriginal.apply(this, arguments);
  
              for (var x = 0; x &lt; modalPopupStack.length; x++) {
  
                  if ($(modalPopupStack[x].background).css("z-index") &gt; $(extender._element).css('z-index') || $(modalPopupStack[x].popup).css("z-index") &gt; $(extender._element).css('z-index')) {
  
                      if ($(modalPopupStack[x].background).css("z-index") &gt; $(extender._element).css('z-index')) {
                          topElement = $(modalPopupStack[x].background).css("z-index");
                      }
                      else if ($(modalPopupStack[x].popup).css("z-index") &gt; $(extender._element).css('z-index')) {
                          topElement = $(modalPopupStack[x].popup).css("z-index");
                      }
  
                  }
  
              }
  
              if (topElement != undefined) {
                  $(extender._backgroundElement).css('z-index', topElement);
              }
  
              modalPopupStack.push({ 'id': extender._id, 'background': extender._backgroundElement, 'popup': extender._element });
  
          },
  
          ModalPopupHideOverride: function () {
              var extender;
              MyPageMethods.ModalPopupHideOriginal.apply(this, arguments);
              extender = modalPopupStack.shift();
          }
  
      }
  
  }
  </code></pre>
  
  <p>I'm sure there is a simple solution to this, but I'm not sure what it is.</p>