Today's Question:  What are you most afraid of as a programmer?        GIVE A SHOUT

Technical Article => Web =>  JavaScript

JavaScript programming style

  阮一峰      2015-10-14 10:16:44      5,942    0    0

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-called programming style is 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 braces
Most 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 line




b). The other is curly brace follows the keyword
        block {



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





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)


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

  function foo (b) {...}

  function(x) {...}

3. Semicolon
Semicolon means the end of a statement, if you omit semicolon at the end of statement, JavaScript will automatically add one semicolon.
     var a = 1
equals to
     var 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 = bar; =;

  foo = bar;

  foo =;

All these four results are possible and it will depends on whether the variable is defined. So
Rule 6 : Don't use with statement

5. 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\n " == 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

8. Global variable
The 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.
Rule 11. Avoid using global variable, if you have to use them, please use uppercase letter as variable name such as UPPER_CASE

9. new command
JavaScript 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, the this keyword in myObject() will point to global object, this will lead to the variables bind to this will be global variables
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

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

11. Block
Rule 15 : Always use curly braces to divide block.

Author : 阮一峰 Source :



Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious



No comment for this article.


Am I going to the past?

By sonic0002