JavaScript Resources

A collection of JavaScript patterns, tutorials and tidbits that I’ve gathered. JavaScript can do so much more than the usual web page coding / DOM manipulation. While most things in the language are easy to learn there are some parts which are rather unique to it. Particularly when it is compared to common object oriented or procedural languages.

1. Closures
2. JavaScript inheritance (it’s flexible, which makes it wacky and weird)
   1. prototypal inheritance w/ JS: http://javascript.crockford.com/prototypal.html
   2. classical inheritance w/ JS (the fake way, just learn to grasp prototypal inheritance): http://javascript.crockford.com/inheritance.html
3. Functions are objects, everything is an object?!
4. It’s really misunderstood (I agree with this: http://javascript.crockford.com/javascript.html)

Essential JavaScript knowledge (common pitfalls)

If you’re new to JavaScript then actually you are lucky. You have a good chance of avoiding all the bad habits people develop and start doing it right.

1. Start at http://javascript.crockford.com/. Doug Crockford is a (the) JavaScript guru and reading his teachings is a good start.
2. Check out this book (by Crockford): Javascript: The Good Parts.
3. Learn about closures. This is an essential understanding that you’ll need if you actually want to get something good done in JS. Just google JavaScript Closures.

Prototypal Inheritance

JavaScript uses prototypal inheritance. This means that objects inherit from other objects rather than instantiate from a class like in Java or PHP.

However, JavaScript still implemented the “new” keyword which most class based inheritance used to create a new instance of a class. In JS there are no classes so “new” will actually create a new Object based on Object.prototype. Let’s illustrate this:

function Constructor() {
    // I get run during new instantiation
    this.member1 = 2;
}

Constructor.prototype.member1 = 1;
Constructor.prototype.member2 = "two";
Constructor.prototype.method  = function () {
    return "hello";
};

var obj = new Constructor(); // obj = Constructor.prototype

alert(obj.member1);  // outputs 2
alert(obj.method()); // outputs "hello"

What happens above is that JS will create a new Object based on Object.prototype and then the code in Constructor() which can set some instance data.

Note the use of “this” in the Constructor. Depending on how Constructor() is called “this” behaves differently. (damn it JS!). This post on Stack Overflow explains it pretty well.

Since Objects inherit from Objects in JS, this means we can dynamically change an Object’s interface. In class based inheritance once you instantiate you can’t add new members or methods to the instance. Check it out:

function F() {}
F.prototype.memberVar = 1;
var g = new F();
alert(g.memberVar); // outputs 1

F.prototype.memberVar = 2;
alert(g.memberVar); // outputs 2

Powerful but confusing. I like Doug Crawford’s way of making JS’s prototypal inheritance a little easier to use:

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}
newObject = Object.create(oldObject);

A nice clean way of doing inheritance in JavaScript. It still requires some change in thinking from the class based instantiation. Yikes. :b

Lazy Function Definition Pattern

var foo = function() {
    var t = new Date();
    foo = function() {
        return t;
    };
    return foo();
};

If you’ve seen “promises” referred to in JS this is where it comes from. This pattern ensures that t is only defined on the first run. Each time after that calls the inner closure.

Module Pattern

var module = function() {
    return {
        "memberVar" : "holy cow!",
        "method" : function() { return "holy cow!";}
    };
}(); // run the anonymous function

This one is used a lot. Essentially using an anonymous function to create some variable scoping to avoid using global variables. Javascript is a weird language… isn’t this just a hack?

Useful Resources

• JavaScript Quiz – you think you know JavaScript?