---
title: "jQuery Plugin Pattern & self-invoking javascript function"
description:
  "I am learning jQuery and one of things I was struggling with is the plugin
  pattern. In jQuery world it is very common to wrap the major functionality of
  the application inside a plugin. This blog discusses how to write a good
  modular plugin."
canonical_url: "https://www.bigbinary.com/blog/understanding-jquery-plugin-pattern-and-self-invoking-javascript-function"
markdown_url: "https://www.bigbinary.com/blog/understanding-jquery-plugin-pattern-and-self-invoking-javascript-function.md"
---

# jQuery Plugin Pattern & self-invoking javascript function

I am learning jQuery and one of things I was struggling with is the plugin
pattern. In jQuery world it is very common to wrap the major functionality of
the application inside a plugin. This blog discusses how to write a good modular
plugin.

- Author: Neeraj Singh
- Published: March 13, 2009
- Categories: jQuery

I am learning jQuery and one of things I was struggling with is the plugin
pattern. In jQuery world it is very common to wrap the major functionality of
the application inside a plugin.

[Here is a great article](https://www.learningjquery.com/2007/10/a-plugin-development-pattern)
which describes in detail how to wrap your javascript code inside a jQuery
plugin. The article did a great job of explaining the basics however it took me
a while to understand the self-invoking functions.

## Self-invoking functions

self-invoking functions are anonymous functions declared on run time and then
invoke it right then and there. Since they are anonymous functions they can't be
invoked twice. However they are a good candidate for initialization work which
is exactly what is happening in the jQuery plugin pattern.

## Declaring a function

A function can be declared in two ways:

```javascript
function hello() {
  alert("Hello");
}
var hello = function () {
  alert("Hello");
};
```

The end result in the above two javascript statement was same. In the end a
variable named hello was created which is a function.

Please note that in the above case only the functions are declared. They are not
invoked. In order to invoke the function we have to do this

```javascript
var hello = function () {
  alert("Hello");
};
hello();
```

How do we invoke an anonymous function. We need to call () on the anonymous
function. But before that we need to wrap the whole command in (). Take a look
at this

```javascript
// original
function hello() {
  alert("Hello");
}

// step1 wrap everything in () so that we have a context to invoke
(function hello() {
  alert("Hello");
})(
  // now call () to invoke this function
  function hello() {
    alert("Hello");
  }
)();
```

The final result is weird looking code but it works and that is how an anonymous
function is declared and invoke on run time.

With this understanding now it becomes easier to see what is happening in this
code

```javascript
(function ($) {
  // ....
})(jQuery);
```

In the above case an anonymous function is being created. However unlike my
anonymous function this anonymous function take a parameter and the name of this
parameter is $. $ is nothing else but jQuery object that is being passed while
invoking this function.

## Links

- [Human page](https://www.bigbinary.com/blog/understanding-jquery-plugin-pattern-and-self-invoking-javascript-function)