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).