Douglas Crockford mentions in his lectures OnJavascript, that javascript is so powerful that even without understanding the language it’s possible to program with it.
Now I understand what he means.
Javascript was the first language I was introduced to, not learnt, but introduced.
I’ve always used javascript to complement the development of web applications. Usually using frameworks, like jquery or mootols. But never by writing pure javascript code.

Even when I had to write some javascript code, was to use certain APIs, like googlemaps, or groupon for example.
Now that I actually need to write javascript code, I realized that I don’t know javascript as a language.

So what’s the solution? Read some books and write some code :)

This weekend I’ve been trying to understand the library html5PreLoader. The library pre-loads resources into the browser.
While reading the code, I end up looking at some parts and having no clue about what they were doing. Functions inside functions, functions inside objects, functions inside variables, and even functions inside functions.
Totally lost, I went to read about how functions work in javascript.

Here are a few examples of how functions can be used:

Functions used as methods:

A function can be a method in javascript. If the function is stored as a property in an object, it is considered to be a method.
When a method is invoked, this is bound to that object

 
 var myObject = {  
 value: o;  
 increment: function (inc) {  
 this.value += typeof inc === ‘number’ ? inc : 1;  
 };  
 myObject.increment();  
 document.writeln(myObject.value); // 1  
 myObject.increment(2);  
 document.writeln(myObject.value); // 3  

Inner functions:

If a method(function) of an object has a inner function, it is not possible to reference the object properties using the keyword this.
To access the properties of the object, the method must assign this to that. Then the inner function can refer to that as being the object itself.
To fix the problem the value of this is assigned to that

 
 function add(n1, n2)  
 {  
 return typeof (n1 === ‘number’ && typeof n2 === ‘number’) ? n1 + n2 : 0;  
 }  
 myObject.doubleNumber = function () {  
 var that = this;  
 var helper = function () {  
 that.value = add(that.value, that.value);  
 };  
 helper();  
 }  
 myObject.doubleNumber();  
 document.writeln(myObject.value);  

Another workaround for the problem is:

  
 if (!Function.prototype.bind) {

Function.prototype.bind = function (oThis) {

if (typeof this !== "function") // closest thing possible to the ECMAScript 5 internal IsCallable function  
 throw new TypeError("Function.prototype.bind – what is trying to be fBound is not callable");

var aArgs = Array.prototype.slice.call(arguments, 1),  
 fToBind = this,  
 fNOP = function () {},  
 fBound = function () {  
 return fToBind.apply(this instanceof fNOP ? this : oThis || window, aArgs.concat(Array.prototype.slice.call(arguments)));  
 };

fNOP.prototype = this.prototype;  
 fBound.prototype = new fNOP();

return fBound;  
 };  
 }

var x = 9;  
 var module = {  
 x: 81,  
 getX: function() { return this.x; }  
 };  
 document.writeln(getX()); // 81

var getX = module.getX;  
 document.writeln(getX() + ‘
’); // 9, because in this case, "this" refers to the global object // create a new function with ‘this’ bound to module var boundGetX = getX.bind(module); document.writeln(boundGetX()); // 81

What happen is when getX is invoked as a method, it has access to this(module object).
However when the method getX is copied to a variable, it loses the module scope, and this now refers to the global object.
So this.x in getX access the global variable x.
The fix is binding getX to the module object. So then this.x will access the module.x variable.

The only problem with this solution is that isn’t cross browser compatible.

Further readings and references:
Javascript the Good Parts
https://developer.mozilla.org/en/JavaScript/Reference/GlobalObjects/Function/bind
https://developer.mozilla.org/en/JavaScript/Reference/Global
Objects/Object
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function