July 9, 2012

Hello JS

A good application written in JavaScript is not only the beautiful user interface or the useful functional, it is also a well formed code which is hidden behind the decoration that the user can see. By well formed code I mean an easy to understand structure of the code, appropriate and suggestive names for variables and functions, comments explaining what the code does or with some information what is in the "ToDo" list. This is a very useful skill to be able to write such code if you want to develop further your application, if you want to show somebody your code or if you work in team, everybody who sees your code has to understand what you wrote there.

1. What's your name?

The JS community is familiar with camelCase naming, which consists of using some words joined without spaces and each of them having the first letter a capital letter. Usually the first letter of the compounded word is lower case, but it can be upper case for functions which describes object prototypes.

A simple example:
var myVar = RegExp('.+');


It is not recommended to use numbers inside the name of variables or functions, because these names are not so suggestive, try to replace numbers with words. For example, if you have two variables like "myNumber" and "myNumber2" replace them with "myHomeNumber" and "myWorkNumber", the last ones are more intuitive for the human mind.

2. Spacing

For a good structure of the code it is recommended to maintain it "in shape". The "Space" and "Tab" keys are our friends in achieving this task. With spaces we need to delimit visually keywords, names, operators, values and brackets. It is very important when reading the code to see apart different pieces of code, understanding what is a variable name, a keyword or an operator. The tabulation at the beginning of the lines helps to show different blocks of code, this is very useful when writing code, you know where you are, what context is accessible and prevent some possible syntax errors when using brackets.

Spacing in action:
    for (var i = 0, length = myArray.length; i < length; i++) {
        if (myArray[i] > 0) {
            console.log('Found something');
        } else {
            console.log('Nothing found');
        }
    }


As you can see, it is simpler to see all parts of the code when there is some space between them, everything is visible, everything is clear.

3. Good comments

Comments are good when they help the reader to understand something that is not so obvious, when they describe a feature that should be added or just describe something about all the code in the current ".js" file. They can become evil if a big part of the code is commented and lays there, this may confuse the reader what the code does. The code should be commented only for short periods of time, when testing for example, or should be removed, to not hinder the understanding of the code in general.

That's how they look like:
    /* find - searches for something,
     * returns the result
     */
    function find() {
        // find something in the array and save the index
        var index = myArray.indexOf('something');
        if (index > -1) {
            return myArray[index];
        } else {
            return null;
        }
        /*
         I should implement something for searching more elements
        */
    }

These principles are valid not only for JavaScript but for others programming languages too, if your code comply these simple rules, you will meet less syntax and logical errors when developing your applications and, for sure, your code will become easier to read and to maintain.

1 comment:

  1. Nice tutorial sir, keep the good work up!

    ReplyDelete