Admin

In Other Languages





By N2H

Nov

26

JavaScript - Coding Efficiency

November 26, 2007 |

Everybody can type JavaScript, or maybe even monkeys can. If you give a hundred monkeys each a computer, one of them can type out a ‘hello world’ alert box. We human are nothing better, many JavaScripters code their JavaScript in a ‘monkey see, monkey do’ style. JavaScript is a very young and powerful language only if used by the right person in the right way. JavaScripters as a very young group of people, must start to evolve. We can’t be monkeys anymore, with tens of thoudsands of mistakes we have made and few success we discovered, we should be ready to be enlightend by these past experience and move on with confidents and critical thinking before coding. So when we start to code, we can make sure that the code is efficent, and it has a meaning that more than randomness.

Let’s take a look at an example about coding efficiency. There are many ways to pass parameters to a function, take a look at the the code below:

function Person1(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.toString = function() {
return this.firstName + " " + this.lastName;
}
}

When you first see the code above, you may think it’s pretty ok, no syntax error, should’t cause any performance problem. But that’s not all you need to look. Now take a look at the chunk of code below:

function Person2(attrs) {
this.firstName = attrs["firstName"]
this.lastName = attrs["lastName"];
this.toString = function() {
return this.firstName + " " + this.lastName;
}
}

Here, we have two different chunks of code. The first chunk of code has a Person1 constructor that accepts two parameters, firstName and lastName. In the second chunk of code, Person2 accepts a single parameter, attrs, which is an array of attributes. Now, let’s write the third chunk of code that execute the first two chunk of code:

function showPerson() {
var p1 = new Person1("Bertrand", "Russell");
var p2 = new Person2({"firstName":"Bertrand","lastName":"Russell"});
document.getElementById("divPerson").innerHTML = p1 + "<br><br>" + p2;
}

In the thrid chunk of code, the showPerson() function executes first two chunks of code and the results are identical, one is the result made by Person1 and the other made by Person2.

Now it’s time to compare Person 1 and Person 2 and see the difference. If you ask an end user, he or she will tell you they are the same person, Bertrand Russell, a British philosopher. But we are developers and to us, there is a difference, or maybe more more than one difference.

First, let’s ask: what happens when we want to have other attributes to help describe a person? For Person1, we need to modify the constructor to accept more parameters. For Person2, it’s just a matter of adding the appropriate field set lines. The call to the constructor has to change for both, so that’s a wash.

So secondly, let’s ask ourselves: But what does the Person1 call tell us?

var p1 = new Person1("Bertrand", "Russell");

You cannot deduce the meaning of the parameters just by looking at this call. How do we know that Russell isn’t actually hsi first name? Or that Bertrand isn’t the name of his father (which it just happens to be)? Clearly, the call syntax for Person2 is better in terms of code clarity. The code is also a bit more easily extensible with that approach.

From the above example, some of you may think we are using a elephant gun to kill a mosquito, but when there are million of mosquitoes out there, maybe even an elephant gun can’t handle them. What I am demostrating here is good coding style, not the code itself. Every script and programm start from a few lines and later become more and more complicated, if we dont keep a good coding style at first, you will find that you start something easy that too hard to finish. It might be hard to start with good coding style, but you can definitely finish it easier.

Below is the test page of the example above, enjoy!
http://www.lab.highub.com/javascript/coding-efficiency.html