JavaScript | Style Guide and Coding Conventions

The JavaScript style guidelines are directions to regulate programming in javascript. These coding prescription are beneficiary to write code in javascript without any syntactical errors. It covers the naming of variables, direction to put whitespaces and semicolons and various statement guidelines.
It also can improve the Quality, Readability & make code maintenance easier.

This article basically covers coding conventions like:

  • Indentation
  • Spaces, all brackets
  • Variable declaration
  • Object guidelines
  • CamelCasing for identifier names
  • Loops and control statements
  • Statement guidelines
  • Constructor
  • Comments
  1. Indentation:
    We always indent our code using two spaces & our code must not end with trailing whitespaces.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function xyz{
      someting();
    }

    chevron_right

    
    

  2. Spaces, all brackets:
    Blank spaces should always be used in the following circumstances:

    • A keyword followed by ‘(‘ or ‘)’ must provide whitespaces before and after it.

      if (condition) {

    • All keywords like ‘function’, ‘typeof’ etc needs extra attention for whitespaces & a space provided after it.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    let integer = function (
        value,
        default_value
    ) {
        value = resolve(value);
        return (10*value);
    };

    chevron_right

    
    

  3. Variable declaration:
    All variables must be declared with var before they are used. we mostly declare the variable at the beginning of the function.
    All names start with a letter.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    NAME = "GFG";
    Fullform = "GeeksforGeeks";
    Rate = 19.90;
    Hate = 0.20;
    Ranking = Rate + (Rate / Hate); 

    chevron_right

    
    

  4. Object guidelines :
    General rules for object definitions:
    There are various types of objects in javascript as array, function, dates, user define objects.
    Basically, every object follows a simple coding style written below.
    In Javascript, we put an equal(=) & opening bracket after declaring the name of the object. We define property as using a colon: and put string values inside quotes “xyz” but not on numeric value. We put a semicolon at the end of one property and do not put at the end of last property.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    var platform = {
      firstName: "GEEKS",
      lastName: "GEEKS",
      Color: "GREEN"
    }; 
    //some are compressed can be written as
    var platform = {firstName:"GEEKS", lastName:"GEEKS", Color:"GREEN"}; 

    chevron_right

    
    

  5. Camel casing for identifier names:
    We mostly use camelcase for the identifier. In camel casing, the first letter of each function should be lowercase and the first letter of subsequent words should be capitalized. Example

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function myFunction(a, b) {
      return a * b;
    }

    chevron_right

    
    

    There should not be underscores between the words.
    If you use a mix of upper and lower case, you have to be extremely consistent & careful.

  6. Loops and Control Structures:

    We use same convention of parenthesis & bracteks for control structures as discussed below

    • Always follow whitespace after an identifier of control statements.
    • Always provide a whitespace & linebreak after the ; semicolon .
    • Always provide a whitesapce after every, coma .

    example given below :-

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    if (condition1 || condition2) {
      action1();
    }
    else if (condition3 && condition4) {
      action2();
    }
    else {
      defaultAction();

    chevron_right

    
    

  7. Statement Guidelines:
    • Simple statement:

      The statement which consists only single line Always end with a semicolon.

    • Compound statement:

      In javascript, we put the space & opening bracket { and have a list of statements with closing bracket } at the end.
      for ex:- at the end of function name declaration before defining it.
      We put the closing bracket on a new line without following whitespace trail.
      We do not put the semicolon at the end of these type of statements.

    • Multiline statements:

      In javascript Whenever a statement is not small enough to fit on one line,
      line breaks must occur after an operator.
      To improves readability lines should break into multiple lines.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    //simple statement 
    var gfg = ["Geeks", "For", "Geeks"];
      
    //compound statement
    for (i = 0; i < 5; i++) {
      a += i;
    }
    //multiline statement
    if (
      a === 123
      && b === 'abc'
    ) {

    chevron_right

    
    

  8. Constructor:

    In javascript Constructors are used in form of function with new keyword.
    The newprefix creates a new object and binds that object to the function’s implied this parameter.
    Constructor functions MUST be given names with an initial uppercase character.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function GeeksforGeeks(node) {}
      
    var geeksforgeeks= new GeeksforGeeks(element);

    chevron_right

    
    

  9. Comments:
    Use line comments, not block comments. The comments should start at the left margin.
    Use ‘//’ in start of comments.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Set i to zero.
          
        i = 0; 

    chevron_right

    
    



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.