JavaScript Coding Conventions
Always use the same coding conventions for all your JavaScript projects.
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 software 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.
This page describes the general JavaScript code conventions used by Pkpioneer. You should also read the next chapter "Best Practices", and learn how to avoid coding pitfalls. |
Variable Names
At Pkpioneer we use camelCase for identifier names (variable and function). 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;
discount = 0.10;
fullPrice = price * 100 / discount;
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;
Declarations on Top
It is good coding practice to put all declarations at the top of each script or function.
This gives better, cleaner code, and reduces the possibility of accidental re-declarations.
var firstName, lastName;
var price, discount, fullPrice;
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;
var price, discount, fullPrice;
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price * 100 / discount;
This also goes for variables in loops:
var i;
for (i = 0; i < 5; i++)
for (i = 0; i < 5; i++)
Since JavaScript moves the declarations to the top anyway (JavaScript hoisting), it is always a good rule. |
Spaces Around Operators
Always put spaces around operators, and after commas:
x = 5 + 6; // Goodx=5+6 // Bad
[40, 100, 1, 5] // Good[40,100,1,5] // Bad
[40, 100, 1, 5] // Good[40,100,1,5] // Bad
Code Indentation
Always use 4 spaces for indentation of code blocs:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
for (i = 1; i < 50; i++) {
sum += i;
}
return (5/9) * (fahrenheit-32);
}
for (i = 1; i < 50; i++) {
sum += i;
}
Do not use tabs (tabulators) for indentation. Text editors interpret tabs differently. |
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.
Example
document.getElementById("demo").innerHTML =
"Hello Dolly.";
"Hello Dolly.";
Performance
Coding conventions are not used by computers. Most rules have little impact on the execution of programs.
Indentation and extra spaces are not significant in small scripts.
For code in development, readability should be preferred. Larger production scripts should be minifyed.
Naming Conventions
Always use the same naming convention for all your code. For example:
- Variable and function names written as camelCase
- Global variable written in UPPERCASE
- Constants (like PI) written in UPPERCASE
Should you use hyp-hens, camelCase, or under_scores in variable names?
This is a question programmers often discuss. The answer depends on who you ask:
Hyphens in HTML and CSS:
HTML5 attributes can start with data- (data-quantity, data-price).
CSS uses hyphens in property-names (font-size).
Hyphens can be mistaken as subtraction attempts. Hyphens are not allowed in JavaScript names. |
Underscores:
Many programmers prefer to use underscores (date_of_birth), especially in SQL databases.
Underscores are often used in PHP documentation.
CamelCase:
CamelCase is often preferred by C programmers.
camelCase:
camelCase is used by JavaScript itself, by jQuery, and other JavaScript libraries.
Don't start names with a $ sign. It will put you in conflict with many JavaScript library names. |