In JS you have the natural flexibility to extend an object you have previously declared. Even more you can extend any native objects! That makes the writing of a jQuery, or whatever javascript library, plugins to be very easy.

As you may know in JS you can have object declared like that:

var obj = { a : 1, b : 2 };

That is an object with two properties a and b which values are respectively 1 and 2. If you’d like to extend this object later you can just write:

obj.c = 3

and now the object looks like that:

{ a : 1, b : 2, c : 3 }

That’s perfect when you’d like to write plugins to jQuery.

As you may know the $ sign in jQuery is synonym of the function called jQuery, so you can add any property to that library with just writing:

jQuery.myMethod = function() {}

JS closures

What are closures? Well you know in almost every programming language you’ve scope of the variables. In JavaScript instead if you declare a variable on the global level:

var a = 1;

you can access this variable right from everywhere! That’s not good at all. If you later declare a function and there you initialize a variable with the same name – the scope of the variables make visible and useful only the inner variable declared within the function.

This helps the programmers to force the usage of pseudo private properties of an object.

The technique is quite simple. You make a anonymous function:

(function() {})();

and every variable inside is not visible outside. Thus you can export only specific features using both the window object or parameters:

var externalObject = {};

(function(o) {
   var myObject = { a : 1, b : 2}
   o.a = myObject.a;
})(externalObject);

Thus you export only one of the properties of myObject. Instead without the closure both a and b properties would be visible to the world.

In help comes also the fact that this anonymous functions are “self-called” so you don’t have to call them after the declaration.

Legacy code and good practices

To come back on the jQuery plugins – it’s good practice to make your plugins in closures so they should not interfere with other code written before.

And one more time – use the jQuery object for your plugins instead of the $ sign, because some libraries different from jQuery use this sign globally and you can have problems with that.

In my next post I’ll write a simple plugin so you could see how it can be done with very small code chunk.

Well every javascript programer knows that a variable defined in javascript file with the var declaration is global into all javascript code.

var a = 12;
console.log(a);

that code prints 12 into the console.

Note: console object is visible in Firefox and Safari, but not in IE, and here’s used just for the test!

Here comes the closures

Let’s assume I’ve two javascript files.

file1.js:

var a = 12;

file2.js:

a = 13;

Than obviously if I print out the variable a in file2.js after that line, I’ll have the value of a equal to 13, and this will be the value of the variable a from the file1.js, because that’s obviously the same variable.

Now let’s make it “private” using closures. First define an anonymous function in file1.js

file1.js:

(function() {
    var a = 12;
})();

With that you define an anonymous function and the ending () you’re invoking that function. Now if you change the above code like that:

file1.js:

(function() {
    var a = 12;
    console.log(a);
})();

the javascript console in FF will print 12, but if you have the code in file2.js another variable with the same name that will be another variable. Let’s merge the two files for better example.

file.js:

var a = 13;

(function() {
    a = 12;
    console.log(a);
})();

console.log(a);

that code will print first 12 and than 13, and that makes clear what the closure function does. Without the closure it will look like this:

file.js:

var a = 13;

var f = function() {
    a = 12;
    console.log(a);
}
f();

console.log(a);

and that will print twice the value of a which is 12.

How to export variables, functions and objects from a closure

Simply by assigning the variables, objects, etc. to appropriate variables in the window object, like that:

file.js:

var a = 13;

(function() {
    a = 12;
    console.log(a);
    window.b = a;
})();

console.log(a);
console.log(b);

now you’ll have first printed 12 from the closure function, than 13 which is the value of the global variable a, and than again 12 which is the variable b, which equals to the closure a, and it’s exported with the help of the window object.