CODEWITHSUNDEEP
jqueryplugins
monad.gon
monad.gon

Reputation: 967

!function($) means what?

I have some questions about jquery plugin - bootstrap-popover.js.

  1. !function ($){ // meaning?
  2. some lines have no semicolon and comma, why?
  3. }(window.jQuery); // meaning?
!function ($) { //<--- 1. what does this line mean?

      "use strict"; // jshint ;_;

      var Popover = function (element, options) {

        this.init('popover', element, options) //<-- 2. this line has no semicolon, why...?

      }

      Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
        ..................................
      })


      var old = $.fn.popover

      $.fn.popover = function (option) {
        return this.each(function () {

          var $this = $(this)
            , data = $this.data('popover')
            , options = typeof option == 'object' && option

          if (!data) $this.data('popover', (data = new Popover(this, options)))

          if (typeof option == 'string') data[option]() // <-- 3. this line has no semicolon no comma, why...?

        })

      }
    .......................................

    }(window.jQuery); // <-- 4. what does this line mean?

Upvotes: 0

Views: 81

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

!function ($) {...}(window.jQuery); is equivalent to (function ($) {...})(window.jQuery); or (function ($) {...})(window.jQuery); which has the same behaviour.

It is a IIFE, self invoked function: http://en.wikipedia.org/wiki/Immediately-invoked_function_expression

(window.jQuery) is the param passed to the anonymous function, this is to put $ inside function refers to jQuery version passed as parameter.

Forget to tell about semi-colon. Following ECMAScript, semi-colons are optionnal, javascript engine are enough clever to find when add them when missing. But, as a side note, there is a particular behaviour:

Following code will always return 'undefined':

return
        1;

In this case, as a new line is detected and engine doesn't know what to return, a semi-colon will be added between return statement and value, giving:

return ;1;

So use: return 1; without new line between it. return 1 will works too, of course.

Upvotes: 3

Andy Jones
Andy Jones

Reputation: 6275

In Javascript / EMCA script, functions are values that can be passed around, called anonymously, or just plain used.

So, for example, the following is perfectly fine.

var square_something = function(x) { return x * x; };
alert(square_something(5));

Taking this concept a step further, we can do things like

alert(function(x) { return x * x; }(5));

That is to say, invoke (or call) the (anonymous) function with the value 5

Another wonderful feature of Javascript / ECMA script is that the character "$" is a perfectly valid variable name. So I can do

var $ = 5;
alert ($);

And I will see the value 5 perfectly fine. The jQuery library makes extensive use of this, as do other Javascript libraries. Or...

var myFunc = function($) { alert($ + 10); }
myFunc(32); // should alert the number 42

In jQuery extensions, you will often see this pattern...

function($) {
  // all the extension code...
}(window.jQuery);

Which is to say, invoke the anonymous function with the value window.jQuery. They do this because other Javascript libraries use the variable $ but not the variable window.jQuery. This is a very subtle way to use the very short and convienent $ instead of window.jQuery everywhere, only within the scope of the defined function.

To answer your "no semi-colon question"... There is no semi-colon on the line you mention because it is not required there. It would, however, be required if you had another line :)

Upvotes: 0

Related Questions