JS Style Guide

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Style Guide

Try to use the same coding conventions for all 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 using the white space, indentation, and comments.
  • Programming practices and principles.

Coding conventions secure quality:

  • Improving code readability.
  • Making code maintenance easier.

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

Variable Names

We have used the camelCase for identifier names (variables and functions).

All names start with a letter.

At the end of this page, you will see a wider discussion about naming rules.

firstName = “John”;

lastName = “Doe”;

price = 19.90;

tax = 0.20;

fullPrice = price + (price * tax);

Spaces Around Operators

Insert spaces around operators ( = + – * / ), and after commas:

Example

let x = y + z;

const myArray = [“Volvo”, “Saab”, “Fiat”];

Code Indentation

Using 2 spaces for indentation of code blocks:

Example

Functions:

function toCelsius(fahrenheit) {

  return (5 / 9) * (fahrenheit – 32);

}

Avoiding using tabs (tabulators) for indentation. Different editors interpret tabs differently.

Statement Rules

  • General rules for simple statements:
  • Always end a simple statement with a semicolon.

Example

const cars = [“Volvo”, “Saab”, “Fiat”];

const person = {

  firstName: “John”,

  lastName: “Doe”,

  age: 50,

  eyeColor: “blue”

};

Avoiding using tabs (tabulators) for indentation. Different editors interpret tabs differently.

Statement Rules

  • General rules for simple statements:
  • Always end a simple statement with a semicolon.

General rules for complex (compound) statements:

  • Putting the opening bracket at the end of the first line.
  • Using one space before the opening bracket.
  • Putting 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 (let 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:

  • Use the opening bracket on the same line as the object name.
  • Make use of colon plus one space between each property and its value.
  • Make use of the quotes around string values, not around numeric values.
  • Adding a comma after the last property-value pair.
  • Placing the closing bracket on a new line, without leading spaces.
  • Object definition must end with a semicolon.

Example

const 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:

Example

const person = 

{

firstName:”John”,

 lastName:”Doe”, 

age:50, eyeColor:”blue”

};

Line Length < 80

For readability, avoid lines longer than 80 characters.

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>My Web Page</h2>

<p>The best place to break a code line is after an operator or a comma.</p>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML =

“Hello Dolly.”;

</script>

</body>

</html>

Output

My Web Page

The best place to break a code line is after an operator or a comma.

Naming Conventions

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

  • Variable and function names are written as camelCase.
  • Global variables are written in UPPERCASE (We don’t, but it’s quite common).
  • Constants (like PI) written in UPPERCASE.

Use hyphens, camelCase, or under_scores in variable names?

This is a question programmers often want to know. The answer depends on who you ask:

Hyphens in HTML and CSS:

HTML5 attributes can be started with data- (data-quantity, data-price).

CSS make use of hyphens in property-names (font-size).

Hyphens can be mistaken for subtraction attempts. Hyphens are not allowed in JavaScript name

Underscores:

Many programmers prefer to use underscores (date_of_birth), especially in SQL databases.

Underscores are used in the PHP documentation.

PascalCase:

PascalCase is often preferred by C programmers.

camelCase:

camelCase is used by JavaScript itself, jQuery, and other JavaScript libraries.

Do not use a $ sign to start a name. It will create a conflict with many JavaScript library names.

Loading JavaScript in HTML

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

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

Accessing HTML Elements

Result of using “untidy” HTML styles, result in JavaScript errors.

These two JavaScript statements produces different results:

const obj = getElementById(“Demo”)

const obj = getElementById(“demo”)

Using the same naming convention (as JavaScript) in HTML.

Visiting the HTML Style Guide.

  • File Extensions
  • HTML files should have a .html extension (.htm is allowed).
  • CSS files should have a .css extension.
  • JavaScript files must have a .js extension.

Use Lower Case File Names

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

london.jpg cannot be accessed as London.jpg.

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

london.jpg can be accessed at London.jpg or london.jpg.

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

If you shift from a case insensitive to a case-sensitive server, even small errors can break your website.

To prevent such kinds of problems, always use lower case file names (if possible).