JavaScript style guide and coding conventions

Remember: Always use the same coding conventions for all your JavaScript projects.

JavaScript Coding Conventions

Coding conventions are style guidelines for programming. They typically cover:

• Naming and declaration rules for variables and functions.
• Rules for the use of white space, indentation, and comments.
• Programming practices and principles

Coding conventions secure quality:

• Improves code readability
• Make code maintenance easier

Coding conventions can be documented rules for teams to follow, or just be your individual coding practice.

Variable Names

We recommend to use camelCase for identifier names (variables and functions).

All names start with a letter.

At the bottom of this page, you will find a wider discussion about naming rules.

                      firstName = "John";
                      lastName = "Doe";
                      
                      price = 19.90;
                      tax = 0.20;
                      
                      fullPrice = price + (price * tax);
                  

Spaces Around Operators

Always put spaces around operators ( = + - * / ), and after commas:

                      var x = y + z;
                      var values = ["Volvo", "Saab", "Fiat"];
                

Code Indentation

Always use 2 spaces for indentation of code blocks:

                      function toCelsius(fahrenheit) {
                        return (5 / 9) * (fahrenheit - 32);
                      }
                

Do not use tabs (tabulators) for indentation. Different editors interpret tabs differently.

Statement Rules

General rules for simple statements:

• Always end a simple statement with a semicolon.

                      var values = ["Volvo", "Saab", "Fiat"];
      
                      var person = {
                        firstName: "John",
                        lastName: "Doe",
                        age: 50,
                        eyeColor: "blue"
                      };
                

General rules for complex (compound) statements:

• Put the opening bracket at the end of the first line.
• Use one space before the opening bracket.
• Put the closing bracket on a new line, without leading spaces.
• Do not end a complex statement with a semicolon.

Functions:

                      function toCelsius(fahrenheit) {
                        return (5 / 9) * (fahrenheit - 32);
                      }
                

Loops:

                      for (i = 0; i < 5; i++) {
                        x += i;
                      }
                

Conditionals:

                      if (time < 20) {
                        greeting = "Good day";
                      } else {
                        greeting = "Good evening";
                      }
                

Object Rules

General rules for object definitions:

• Place the opening bracket on the same line as the object name.
• Use colon plus one space between each property and its value.
• Use quotes around string values, not around numeric values.
• Do not add a comma after the last property-value pair.
• Place the closing bracket on a new line, without leading spaces.
• Always end an object definition with a semicolon.

                      var person = {
                        firstName: "John",
                        lastName: "Doe",
                        age: 50,
                        eyeColor: "blue"
                      };
                

Short objects can be written compressed, on one line, using spaces only between properties, like this:

                      var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
                    

Line Length < 80

For readability, avoid lines longer than 80 characters.

If a JavaScript statement does not fit on one line, the best place to break it, is after an operator or a comma.

                      document.getElementById("demo").innerHTML =
                      "Hello Dolly.";
                  

Naming Conventions

Always use the same naming convention for all your code. For example:

• Variable and function names written as camelCase
• Global variables written in UPPERCASE
• Constants (like PI) written in UPPERCASE

Note: Do not start names with a $ sign. It will put you in conflict with many JavaScript library names.

Loading JavaScript in HTML

Use simple syntax for loading external scripts (the type attribute is not necessary):

                      <script src="myscript.js"></script>
                    

Accessing HTML Elements

A consequence of using "untidy" HTML styles, might result in JavaScript errors.

These two JavaScript statements will produce different results:

                      var obj = getElementById("Demo")
      
                      var obj = getElementById("demo")
                

If possible, use the same naming convention (as JavaScript) in HTML.

Use Lower Case File Names

Most web servers (Apache, Unix) are case sensitive about file names:

london.webp cannot be accessed as London.webp.

Other web servers (Microsoft, IIS) are not case sensitive:

london.webp can be accessed as London.webp or london.webp.

If you use a mix of upper and lower case, you have to be extremely consistent.

If you move from a case insensitive, to a case sensitive server, even small errors can break your web site.

To avoid these problems, always use lower case file names (if possible).