Coding conventions are style guidelines for programming. They typically cover:
- Rules for the use of white space, indentation, and comments.
- Programming practices and principles.
- Naming and declaration rules for variables and functions.
Variable Names
At W3schools we 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);
Here’s an example of a JavaScript style guide that follows common best practices and conventions:
// Use camelCase for variable and function names
var myVariable = "Hello";
function myFunction() {
// ...
}
// Use PascalCase for class and constructor names
class MyClass {
constructor() {
// ...
}
myMethod() {
// ...
}
}
// Use uppercase for constant values
const PI = 3.14159;
// Use single quotes for string literals
var message = 'Hello, world!';
// Use meaningful and descriptive variable and function names
var userCount = 10;
function calculateAverage(numbers) {
// ...
}
// Use spaces around operators and after commas
var sum = 10 + 5;
var names = ['Alice', 'Bob', 'Charlie'];
// Use indentation with 2 or 4 spaces (choose one and be consistent)
function myFunction() {
if (condition) {
// ...
} else {
// ...
}
}
// Use comments to explain code intent or provide context
var result = calculateAverage([1, 2, 3]); // Calculate average of numbers
// Avoid using global variables
function myFunction() {
var localVar = 10;
// ...
}
// Use semicolons to end statements
var x = 5;
// Use strict equality (===) for comparisons
if (x === 5) {
// ...
}
// Avoid using the eval() function
var result = eval('x + y');
// Use ES6 features when available and appropriate
const myArray = [1, 2, 3];
const [first, second, third] = myArray;
// Organize code logically and use proper spacing to improve readability
// Use proper error handling
try {
// ...
} catch (error) {
// ...
}
This style guide covers various aspects of JavaScript coding conventions:
- Naming conventions: camelCase for variables and functions, PascalCase for classes and constructors, uppercase for constants.
- String literals: Use single quotes.
- Variable and function names: Be descriptive and meaningful.
- Spacing and indentation: Use spaces around operators and after commas, indent code consistently.
- Comments: Use them to explain code intent or provide context.
- Global variables: Avoid using them whenever possible.
- Semicolons: Use them to end statements.
- Equality: Use strict equality (===) for comparisons.
- Avoid using
eval(). - ES6 features: Use them when available and appropriate.
- Code organization and readability.
- Proper error handling.
Remember, a style guide is not a strict rulebook, but rather a set of guidelines to promote consistency, readability, and maintainability in your code. Feel free to customize the style guide to fit your team’s or project’s specific needs.
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.
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.
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 (We don’t, but it’s quite common)
- 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.
PascalCase:
PascalCase is often preferred by C programmers.
camelCase:
camelCase is used by JavaScript itself, by jQuery, and other JavaScript libraries.
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)
Accessing HTML Elements
A consequence of using “untidy” HTML styles, might result in JavaScript errors.
File Extensions
HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.
Use Lower Case File Names
Most 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 as London.jpg or london.jpg.
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).
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 minimized.