YouTipJs Conventions
# JavaScript Code Conventions
* * *
All JavaScript projects should follow the same conventions.
* * *
## JavaScript Code Conventions
Code conventions generally include the following aspects:
* Naming rules for variables and functions.
* Rules for using spaces, indentation, and comments.
* Other common conventions...
Conventional code is easier to read and maintain.
Code conventions are usually established before development and can be discussed and set with your team members.
* * *
## Variable Names
Variable names are recommended to be in **camelCase**:
firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);
* * *
## Spaces and Operators
Usually, spaces are required before and after operators ( = + - * / ):
### Example:
var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];
* * *
## Code Indentation
Usually, 4 spaces are used to indent code blocks:
### Function:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
|  | It is not recommended to use the TAB key for indentation, as different editors interpret the TAB key differently. |
| --- |
* * *
## Statement Rules
General rules for simple statements:
* A statement usually ends with a semicolon.
### Example:
var values = ["Volvo", "Saab", "Fiat"];
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
General rules for complex statements:
* Place the opening curly brace at the end of the first line.
* Add a space before the opening curly brace.
* Place the closing curly brace on a separate line.
* End a complex declaration with a semicolon.
### Function:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
### Loop:
for (i = 0; i <5; i++) {
x += i;
}
### Conditional Statement:
if (time <20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
* * *
## Object Rules
Rules for object definitions:
* Place the opening curly brace on the same line as the class name.
* Add a space between the colon and the property value.
* Use double quotes for strings, not for numbers.
* Do not add a comma after the last property value.
* Place the closing curly brace on a separate line, ending with a semicolon.
### Example:
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
Short object code can be written on a single line:
### Example:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
* * *
## Less Than 80 Characters Per Line
For readability, it is recommended to keep each line under 80 characters.
If a JavaScript statement exceeds 80 characters, it is recommended to break the line after an operator or a comma.
### Example:
document.getElementById("demo").innerHTML =
"Hello Tutorial.";
[Try it »](#)
* * *
## Naming Rules
Generally, the naming rules for many programming languages are similar, for example:
* Variables and functions use lowerCamelCase, meaning the first word is lowercase and subsequent words start with an uppercase letter ( **lowerCamelCase**)
* Global variables are in uppercase (**UPPERCASE**)
* Constants (like PI) are in uppercase (**UPPERCASE**)
Do you use these rules for variable naming: **hyp-hens**, **camelCase**, or **under_scores**?
**Hyphens (-) in HTML and CSS:**
HTML5 attributes can start with data- (e.g., data-quantity, data-price)