Class and Object definitions in JavaScript

A developer friend of mine emailed me with a question about Classes in Javascript:

Don’t suppose you have any literature or anything I can look at in regards to the correct structure for a javascript class (in node.js)?
I have looked all over the shop and found various different ways of doing it but am having problems.

My emailed response

Classes don’t exist in Javascript (yet), at least not natively. There is some work on EcmaScript / JavaScript.next that suggests they might but, in short:

Javascript is lexically scoped and functions are ‘1st class objects’.

You can declare and instantiate objects in many ways but the most familiar might be  like this:

function foo(bar){
    this.bar = bar;
}

var myFoo = new foo('oh hi there');
alert(myFoo.bar);

Where you’d normally use the term ‘class’, it’s implied in Javascript, as above for example,  but not explicit. There are also many different ways to approach this. Javascript does not support access levels (private, public, protected etc) natively, so you have to follow a coding style that will have the same effect.

There  many different patterns you can use, but different patterns work well for different problems and you don’t always want to use the classical (class based) style, you can do things differently in Javascript and utilise the flexibility of the language to your advantage.

Some things worth reading about:

Read mostly everything Douglas Crockford writes: (and get his book on Javascript – The good parts). Although I disagree with some things he says about coding style, it’s all relevant even though it was written a while ago.

http://www.crockford.com/

Learn these

Prototypal Inheritance

http://javascript.crockford.com/prototypal.html

 Javascript scope

http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

Javascript closures

http://blog.morrisjohns.com/javascript_closures_for_dummies

Object Literals

http://www.dyn-web.com/tutorials/obj_lit.php

Currying

http://www.dustindiaz.com/javascript-curry/

Module pattern

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

That should be enough to get you started!

Advertisements

Interesting content, it makes work less ‘work like’!

www.grundini.com

I just finished working on the first release of this website (above) for Peter Grundy, with Further Creative http://www.furthercreative.co.uk.

After discussing with the user experience expert and designer, I  faced the usual development decisions. I chose some solutions which use technology that I’d not employed in anger on many projects before. With Peter’s content being heavy on the visual side, delivered via Flickr, my decisions were largely driven by how well we could present his work,  over any potential SEO ranking.

I don’t remember enjoying working on content that was as stimulating and interesting as the work that Peter creates. Luckily Further allowed the user experience expert, designer and myself enough time to try and achieve what we set out to do and I think this first release is very close to getting there.

Working in a good team always makes work more enjoyable, and the client is always part of a wider development team. In this case the team was great and the content we were working on was inspiring.

I hope it’s not too long before I get to work on the same kind of project again!