Technical Article => Web => JavaScript









programming style





Douglas Crockford is a JavaScript expert, he is the inventor of JSON. In November 2011 he made a speech " Youtube ", during the speech he talked about what JavaScript programming style is.I recommend this speech to everyone, it not only helps you learn JavaScript but also make you enjoying because Crockford is very humorous and he made audience laugh frequently.Next I will summarize JavaScript programming style according to this speech and his article code convention The so-calledis a set of rules of writing code. Different programmers have different programming styles.Some people say rule of compilers is called grammar, this is what programmers have to obey, while the part compiler ignores is called programming style, this is what programmer can freely choose. Actually I think this is not completely true, programmers can freely choose programming style, but good programming style helps write codes which have higher quality and less mistakes and are more maintainable.We should clarify that choice of programming style should not be based on personal preference, familiarity of programming style and lines of codes, programmers should consider the readability of codes and reduce less mistakes. What you should choose may not be what you prefer, but it should be one which can express what you want to express.1. Position of curly bracesMost programming languages use curly braces to divide blocks. The position of the beginning of curly brace can be different. There are two most popular styles.a). The curly brace starts in new lineblock

{

...

}

b). The other is curly brace follows the keywordblock {

...

}

Generally, both styles are acceptable, however, the second one is preferred in JavaScript since JavaScript will automatically add semicolon to the end of line. It will lead some unnoticeable mistakes.with the first style



return { key:value; };

The original code is intended to return an object, but it actually returns undefined because JavaScript automatically add a semicolon at the end of return statement, to avoid this mistake, we need to write it as :

return {

key : value;

};

Rule 1 : The beginning curly brace of a block should not start in a new line

2. Parentheses

Parentheses have two functions in JavaScript: one is to call a function, the other one is grouping. We can use space to differentiate these two different kinds of parentheses.

Rule 2 : When calling functions, there should be no space between function name and the left parenthesis.

Rule 3 : When defining functions, no space between function name and parameters

Rule 4 : All other situation should include a space between the element and the left parenthesis.

According to above rules, next coding styles are not acceptable

foo (bar)

return(a+b);

if(a === 0) {...}

function foo (b) {...}

function(x) {...}





3. SemicolonSemicolon means the end of a statement, if you omit semicolon at the end of statement, JavaScript will automatically add one semicolon.var a = 1equals tovar a = 1;So some people advocate omitting semicolon at the end of a statement. But if the first token of the next line is one of the five characters : "(", "[", "/", "+" and "-", JavaScript will not add semicolon.x = y

(function (){

...

})();

The codes above is the same as

x = y(function (){...})();

Rule 5 : Don't omit semicolon at the end of a statement

4. with statement

with can reduce the quantity of codes writing, but it may bring confusions

with (o) {

foo = bar;

}

There are four execution results for the above codes

o.foo = bar; o.foo = o.bar; foo = bar; foo = o.bar;

Rule 6 : Don't use with statement





All these four results are possible and it will depends on whether the variable is defined. So5. Equal(==) and strict equal(===)JavaScript have two operators to express equal: == and ===Because == operator will automatically do type casting, this may cause some unexpected results.0 == ''// true

1 == true // true

2 == true // false

0 == '0' // true

false == 'false' // false

false == '0' // true

" \t\r

" == 0 // true

Rule 7 : Don't use ==, only use ===

6. Merge of statements

Some programmers like concise codes. For example, the original codes are

a = b;

if (a) {...}

They likes writing them as below

if (a = b) {...}

Although it reduces one line, it reduces the readability and it may confuse people to think the meaning of this line of code is



if （a === b）{...}

Another situation is some programmer like to assign values to many variables in the same line:

var a = b = 0;

They think this line of code equals to



var a = 0, b = 0;

In fact, it is not, the real effect is

b = 0;



var a = b;

Rule 8 : Don't merge codes with different purpose into the same line

7. Variable declaration

JavaScript will automatically hoist variable declaration to the block header

if (!o) {

var o = {};

}

Equals to



var o;

if (!o) {

o = {};

}

In order to avoid the above problem, why not putting the variable declaration to the block header

for (var i ...) {...}

You had better write them as



var i;



for (i ...) {...,}

Rule 9 : All variable declaration should be at the header of a function



Rule 10 : All functions should use defined variables

Rule 11. Avoid using global variable, if you have to use them, please use uppercase letter as variable name such as UPPER_CASE

this

Rule 12 : Don't use new, try to use Object.create()

Rule 13 : When defining object with function, the object constructor function name should use InitialCap, for other functions, use lowercase letter as the first character of the function name

Rule 14 : Don;t use ++ and --, try to use += and -= instead

Rule 15 : Always use curly braces to divide block.

8. Global variableThe biggest syntax weakness of JavaScript is that global variable is readable and writable in any code block. This is very bad to code modularity and reusability.9. new commandJavaScript uses new to create a new instance of object.var o = new myObject();The problem of this kind of statement is that if you forget to add new, thekeyword in myObject() will point to global object, this will lead to the variables bind to this will be global variables10. ++ and --11. BlockAuthor : 阮一峰 Source : http://www.ruanyifeng.com/blog/2012/04/javascript_programming_style.html