What is this javascript notation? [duplicate]

Question

I found it here

;(function ($, window, document, undefined) {
//code
}(jQuery, this, this.document));

This is the first time I see something like this. What it is and how it is interpreted? I don't understand why does it have to pass this and this.document, and what's with the 'undefined'.

The reason I am asking is because I included it in my page and

  if($('ul.mtree').length)

Returns false, despite it returning true when I type it in the console.

Answer 1

It's an immediately executed function. The ; at the start protects from potential syntax errors after minification.

The function itself provides for scoping of the arguments rather than referencing them at global scope. It also provides for privacy of local variables defined with the function. The somewhat confusing final parameter passed of undefined protects against malicious changes to what undefined represents at the global scope.

Lots of resources available if you google for javascript terms such as self executing functions, global scope, closures, module pattern.

Answer 2

The first semi-colon ; sets the following code apart from any other preceding code that may have forgot the semi-colon. This is important as the parens will try to run the previous statements as a function if the semi colon was not found.

For the rest of the code, we are just declaring an "in-line" function which will be immediately executed where the arguments $, window, document are then instantiated as jQuery, this, this.document (respectively) from the global scope. This is primarily so that you can use "$" within your new jQuery plugin without worrying if $ has been overwritten somewhere else. You can be sure that $ is the same as jQuery.

Read more about "Protecting the $ Alias and Adding Scope" here

Update from OP:

For the if statement returning false, be sure that your html is loaded at the time of calling your if statement. One quick way to do this, is to wrap it in a $(document).ready method like so:

$(document).ready(function () {
    if($('ul.mtree').length) {
         alert("got 'em!");
    }
});