What does this JavaScript/jQuery syntax mean?

Question

What does the following syntax mean?

(function($){
    $.fn.columnize = function(options) {
    ...

What’s function($)?

What’s $.fn. …?

Answer 1

This convention is used when writing plugins to ensure there is no confilict with other Javascript libraries using the $ notation, whilst ensuring the plugin author can still use this notataion:

(function($){
    ...
})(jQuery); 

The author is declaring an anonymous function with a single parameter ($), then immediately calling it and passing the jQuery object to it. This ensures the function is called and that everything in it is defined.

A longer notation might be:

function MyDefs($){
    ...
}
MyDefs(jQuery);

Although that would create a variable MyDefs in the global namespace. The anonymous function pattern leaves the global namespace empty, avoiding conflicts.

Answer 2

It declares the columnize function as a jQuery plugin allowing you to use it on elements like this $('.someSelector').columnize(). You could read more about plugin authoring here.