title: What is the reason for this JavaScript immediate invocation pattern?
body: <p>I came across the following pattern when looking through the <a href="https://github.com/mleibman/SlickGrid/blob/master/slick.editors.js" rel="nofollow">SlickGrid</a> source code:</p>
  
  <pre><code>(function ($) {
    var SlickEditor = {
  
      TextCellEditor: function (args) {
        ...
      },
  
      LongTextCellEditor: function (args) {
        ...
      }
    };
  
    $.extend(window, SlickEditor);
  
  })(jQuery);
  </code></pre>
  
  <p>If I understand this correctly, it is using immediate invocation to define various function objects and then merge them into the global namespace.</p>
  
  <p>So I could just define my functions globally like this and it would have the same effect, right?</p>
  
  <pre><code>function TextCellEditor (args) {
    ...
  }
  
  function LongTextCellEditor (args) {
    ...
  }
  </code></pre>
  
  <p>The only difference I can see is that in the first version, I can use the <code>$</code> shorthand to refer to the <code>jQuery</code> object. Apart from that the result would be identical in both cases.</p>
  
  <p>I would like to know if I am missing something. Maybe there is another good reason for doing things this way?</p>
  
  <p><strong>UPDATE</strong>: Please note, I realise that using this immediate invocation pattern allows for the use of private variables declared in the anonymous function. But there aren't any variables declared in this case and the functions are being injected into the global scope anyway. So I'd still like to know if there's any real difference.</p>
  
  <p>Some answers pointed out that referencing local variables is much faster than referencing global variables. Does this still hold true if I reference <code>$</code>from within the <code>TextCellEditor()</code> constructor. <code>$</code> is not really local to <code>TextCellEditor()</code> since it is defined in the scope of the outer anonymous function.</p>
  
  <p>All comments appreciated.</p>