JavaScript Coding Standard

If a topic is not covered in this document, refer to airbnb JavaScript Style Guide

  1. Line break limit at 110 char, not 80 char

  1. 4 spaces indentation, not 2 spaces, not tabs

  1. Constants named in screaming snake case

// bad

var feedbackresponserecipient = ‘responserecipient’;

// badAsWell

var feedbackResponseRecipient = ‘responserecipient’;

// b_a_d

var feedback_response_recipient = ‘responserecipient’;

// G_O_O_D

var FEEDBACK_RESPONSE_RECIPIENT = ‘responserecipient’;

  1. Line wrapping rules for improving readability (follow Java Style Guide):

When wrapping lines, the main objective is to improve readability. Feel free to break rules if it improves readability. Do not accept the auto-formatting suggested by the IDE as Eclipse’s JavaScript auto-formatting is very different from that suggested by TEAMMATES.

It is OK to exceed the limit slightly or wrap the lines much shorter than limit.

In general,

  • Break after a comma.

// Bad
var alphabets = [
       a
   ,   b
   ,   c
];

// Good
var alphabets = [
   a,
   b,
   c
];

// Bad
var numbers = {
       one
: 1
   ,   two
: 2
   ,   three
: 3
   ,   four
: 4
};


// Good
var numbers = {
   one
: 1,
   two
: 2,
   three
: 3,
   four
: 4
};

  • Align the new line with the beginning of the parent element.
    // Bad
    myFunction(arg1, arg2, arg3,
       nonAlignedArg4, arg5);

// Good
myFunction(arg1, arg2

           arg3, arg4);
myFunction(arg1,
          myOtherFunction(arg2,
                          arg3),
          arg4);

  • Break before an operator. This also applies to other "operator-like" symbols like the dot separator (.).

// Bad
mySum = a + b + c +

        d;
myString = ‘Long line split’ +

           ‘split into two parts’;

$('#responses').
   
find('.selected').
       highlight().
       end().
   
find('.open').
       updateCount();

// Good

mySum = a + b + c

        + d;
myString = ‘Long line split’

           + ‘split into two parts’;
$(
'#responses')
   .
find('.selected')
       .highlight()
       .end()
   .
find('.open')
       .updateCount();

  • Prefer higher-level breaks to lower-level breaks. In the example below, the first is preferred, since the break occurs outside the parenthesized expression, which is at a higher level.

// Bad
longName1 = longName2 * (longName3 + longName4

            - longName5) + 4 * longName6;

// Good

longName1 = longName2 * (longName3 + longName4 - longName5)

            + 4 * longName6;

  • Here are three acceptable ways to format ternary expressions:

// Bad

alpha = (aLongBooleanExpression) ? beta

      : gamma;
alpha = (aLongBooleanExpression) ? beta

         : gamma;

alpha = (aLongBooleanExpression)

                            ? beta

                                     : gamma;

// Good

alpha = (aLongBooleanExpression) ? beta : gamma;
alpha = (aLongBooleanExpression) ? beta

                                 : gamma;

alpha = (aLongBooleanExpression)

      ? beta

      : gamma;

Additional Reading

  1. JavaScript Scoping and Hoisting
  2. Truth Equality and JavaScript
  3. Future of JavaScript (ES6 - Incoming Features)
  4. ES6 Compatibility in Browsers
  5. Useful CSS Selectors to know
  6. W3schools CSS Selectors Reference