|
###### [Home](home) / [Digitec Coding Practices](coding-practices) / Javascript Coding Standards
|
|
#### [Home](home) / [Digitec Coding Practices](coding-practices) / Javascript Coding Standards
|
|
|
|
|
|
---
|
|
---
|
|
|
|
|
... | @@ -23,7 +23,7 @@ All of our JavaScript code is sent directly to the public. It should always be o |
... | @@ -23,7 +23,7 @@ All of our JavaScript code is sent directly to the public. It should always be o |
|
Neatness counts.
|
|
Neatness counts.
|
|
|
|
|
|
|
|
|
|
#### JavaScript Files
|
|
### JavaScript Files
|
|
|
|
|
|
JavaScript programs should be stored in and delivered as `.js` files.
|
|
JavaScript programs should be stored in and delivered as `.js` files.
|
|
|
|
|
... | @@ -32,16 +32,16 @@ JavaScript code should not be embedded in HTML files unless the code is specific |
... | @@ -32,16 +32,16 @@ JavaScript code should not be embedded in HTML files unless the code is specific |
|
`<script src=filename.js>` tags should be placed as late in the body as possible. This reduces the effects of delays imposed by script loading on other page components. There is no need to use the `language` or `type` attributes. It is the server, not the script tag, that determines the MIME type.
|
|
`<script src=filename.js>` tags should be placed as late in the body as possible. This reduces the effects of delays imposed by script loading on other page components. There is no need to use the `language` or `type` attributes. It is the server, not the script tag, that determines the MIME type.
|
|
|
|
|
|
|
|
|
|
#### Indentation
|
|
### Indentation
|
|
|
|
|
|
The unit of indentation is four spaces. Use of tabs should be avoided because (as of this writing in the 21st Century) there still is not a standard for the placement of tabstops. The use of spaces can produce a larger filesize, but the size is not significant over local networks, and the difference is eliminated by [minification](http://yuiblog.com/blog/2006/03/06/minification-v-obfuscation/).
|
|
The unit of indentation is four spaces. Use of tabs should be avoided because (as of this writing in the 21st Century) there still is not a standard for the placement of tabstops. The use of spaces can produce a larger filesize, but the size is not significant over local networks, and the difference is eliminated by [minification](http://yuiblog.com/blog/2006/03/06/minification-v-obfuscation/).
|
|
|
|
|
|
|
|
|
|
#### Line Length
|
|
### Line Length
|
|
|
|
|
|
Avoid lines longer than 80 characters. When a statement will not fit on a single line, it may be necessary to break it. Place the break after an operator, ideally after a comma. A break after an operator decreases the likelihood that a copy-paste error will be masked by semicolon insertion. The next line should be indented 8 spaces.
|
|
Avoid lines longer than 80 characters. When a statement will not fit on a single line, it may be necessary to break it. Place the break after an operator, ideally after a comma. A break after an operator decreases the likelihood that a copy-paste error will be masked by semicolon insertion. The next line should be indented 8 spaces.
|
|
|
|
|
|
#### Comments
|
|
### Comments
|
|
|
|
|
|
Be generous with comments. It is useful to leave information that will be read at a later time by people (possibly yourself) who will need to understand what you have done. The comments should be well-written and clear, just like the code they are annotating. An occasional nugget of humor might be appreciated. Frustrations and resentments will not.
|
|
Be generous with comments. It is useful to leave information that will be read at a later time by people (possibly yourself) who will need to understand what you have done. The comments should be well-written and clear, just like the code they are annotating. An occasional nugget of humor might be appreciated. Frustrations and resentments will not.
|
|
|
|
|
... | @@ -58,7 +58,7 @@ Generally use line comments. Save block comments for formal documentation and fo |
... | @@ -58,7 +58,7 @@ Generally use line comments. Save block comments for formal documentation and fo |
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Variable Declarations
|
|
### Variable Declarations
|
|
|
|
|
|
All variables should be declared before used. JavaScript does not require this, but doing so makes the program easier to read and makes it easier to detect undeclared variables that may become implied globals. Implied global variables should never be used.
|
|
All variables should be declared before used. JavaScript does not require this, but doing so makes the program easier to read and makes it easier to detect undeclared variables that may become implied globals. Implied global variables should never be used.
|
|
|
|
|
... | @@ -77,7 +77,7 @@ JavaScript does not have block scope, so defining variables in blocks can confus |
... | @@ -77,7 +77,7 @@ JavaScript does not have block scope, so defining variables in blocks can confus |
|
Use of global variables should be minimized. Implied global variables should never be used.
|
|
Use of global variables should be minimized. Implied global variables should never be used.
|
|
|
|
|
|
|
|
|
|
#### Function Declarations
|
|
### Function Declarations
|
|
|
|
|
|
All functions should be declared before they are used. Inner functions should follow the var statement. This helps make it clear what variables are included in its scope.
|
|
All functions should be declared before they are used. Inner functions should follow the var statement. This helps make it clear what variables are included in its scope.
|
|
|
|
|
... | @@ -183,7 +183,7 @@ var collection = (function () { |
... | @@ -183,7 +183,7 @@ var collection = (function () { |
|
}());
|
|
}());
|
|
```
|
|
```
|
|
|
|
|
|
#### Names
|
|
### Names
|
|
|
|
|
|
|
|
|
|
|
|
|
... | @@ -213,12 +213,12 @@ Global variables should be in all caps. (JavaScript does not have macros or cons |
... | @@ -213,12 +213,12 @@ Global variables should be in all caps. (JavaScript does not have macros or cons |
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Statements
|
|
### Statements
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### Simple Statements
|
|
#### Simple Statements
|
|
|
|
|
|
|
|
|
|
|
|
|
... | @@ -233,7 +233,7 @@ JavaScript allows any expression to be used as a statement. This can mask some e |
... | @@ -233,7 +233,7 @@ JavaScript allows any expression to be used as a statement. This can mask some e |
|
|
|
|
|
|
|
|
|
|
|
|
|
##### Compound Statements
|
|
#### Compound Statements
|
|
|
|
|
|
|
|
|
|
|
|
|
... | @@ -248,7 +248,7 @@ Compound statements are statements that contain lists of statements enclosed in |
... | @@ -248,7 +248,7 @@ Compound statements are statements that contain lists of statements enclosed in |
|
- The } (right curly brace) should begin a line and be indented to align with the beginning of the line containing the matching { (left curly brace).
|
|
- The } (right curly brace) should begin a line and be indented to align with the beginning of the line containing the matching { (left curly brace).
|
|
- Braces should be used around all statements, even single statements, when they are part of a control structure, such as an if or for statement. This makes it easier to add statements without accidentally introducing bugs.
|
|
- Braces should be used around all statements, even single statements, when they are part of a control structure, such as an if or for statement. This makes it easier to add statements without accidentally introducing bugs.
|
|
|
|
|
|
##### Labels
|
|
#### Labels
|
|
|
|
|
|
|
|
|
|
|
|
|
... | @@ -258,7 +258,7 @@ Statement labels are optional. Only these statements should be labeled: while, d |
... | @@ -258,7 +258,7 @@ Statement labels are optional. Only these statements should be labeled: while, d |
|
|
|
|
|
|
|
|
|
|
|
|
|
##### return Statement
|
|
#### return Statement
|
|
|
|
|
|
|
|
|
|
|
|
|
... | @@ -267,7 +267,7 @@ A return statement with a value should not use ( ) (parentheses) around the valu |
... | @@ -267,7 +267,7 @@ A return statement with a value should not use ( ) (parentheses) around the valu |
|
|
|
|
|
|
|
|
|
|
|
|
|
##### if Statement
|
|
#### if Statement
|
|
|
|
|
|
The if class of statements should have the following form:
|
|
The if class of statements should have the following form:
|
|
|
|
|
... | @@ -291,7 +291,7 @@ The if class of statements should have the following form: |
... | @@ -291,7 +291,7 @@ The if class of statements should have the following form: |
|
}
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
##### for Statement
|
|
#### for Statement
|
|
|
|
|
|
A for class of statements should have the following form:
|
|
A for class of statements should have the following form:
|
|
|
|
|
... | @@ -319,7 +319,7 @@ The second form should be used with objects. Be aware that members that are adde |
... | @@ -319,7 +319,7 @@ The second form should be used with objects. Be aware that members that are adde |
|
}
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
##### while Statement
|
|
#### while Statement
|
|
|
|
|
|
A while statement should have the following form:
|
|
A while statement should have the following form:
|
|
|
|
|
... | @@ -329,7 +329,7 @@ A while statement should have the following form: |
... | @@ -329,7 +329,7 @@ A while statement should have the following form: |
|
}
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
##### do Statement
|
|
#### do Statement
|
|
|
|
|
|
A do statement should have the following form:
|
|
A do statement should have the following form:
|
|
|
|
|
... | @@ -341,7 +341,7 @@ A do statement should have the following form: |
... | @@ -341,7 +341,7 @@ A do statement should have the following form: |
|
|
|
|
|
Unlike the other compound statements, the do statement always ends with a ; (semicolon).
|
|
Unlike the other compound statements, the do statement always ends with a ; (semicolon).
|
|
|
|
|
|
##### switch Statement
|
|
#### switch Statement
|
|
|
|
|
|
A switch statement should have the following form:
|
|
A switch statement should have the following form:
|
|
|
|
|
... | @@ -358,7 +358,7 @@ Each case is aligned with the switch. This avoids over-indentation. |
... | @@ -358,7 +358,7 @@ Each case is aligned with the switch. This avoids over-indentation. |
|
|
|
|
|
Each group of statements (except the default) should end with break, return, or throw. Do not fall through.
|
|
Each group of statements (except the default) should end with break, return, or throw. Do not fall through.
|
|
|
|
|
|
##### try Statement
|
|
#### try Statement
|
|
|
|
|
|
The try class of statements should have the following form:
|
|
The try class of statements should have the following form:
|
|
|
|
|
... | @@ -378,15 +378,15 @@ The try class of statements should have the following form: |
... | @@ -378,15 +378,15 @@ The try class of statements should have the following form: |
|
}
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
##### continue Statement
|
|
#### continue Statement
|
|
|
|
|
|
Avoid use of the continue statement. It tends to obscure the control flow of the function.
|
|
Avoid use of the continue statement. It tends to obscure the control flow of the function.
|
|
|
|
|
|
##### with Statement
|
|
#### with Statement
|
|
|
|
|
|
The with statement should not be used.
|
|
The with statement should not be used.
|
|
|
|
|
|
#### Whitespace
|
|
### Whitespace
|
|
|
|
|
|
Blank lines improve readability by setting off sections of code that are logically related.
|
|
Blank lines improve readability by setting off sections of code that are logically related.
|
|
|
|
|
... | @@ -400,23 +400,23 @@ No space should separate a unary operator and its operand except when the operat |
... | @@ -400,23 +400,23 @@ No space should separate a unary operator and its operand except when the operat |
|
Each ; (semicolon) in the control part of a for statement should be followed with a space.
|
|
Each ; (semicolon) in the control part of a for statement should be followed with a space.
|
|
Whitespace should follow every , (comma).
|
|
Whitespace should follow every , (comma).
|
|
|
|
|
|
#### Bonus Suggestions
|
|
### Bonus Suggestions
|
|
|
|
|
|
##### {} and []
|
|
#### {} and []
|
|
|
|
|
|
Use {} instead of new Object(). Use [] instead of new Array().
|
|
Use {} instead of new Object(). Use [] instead of new Array().
|
|
|
|
|
|
Use arrays when the member names would be sequential integers. Use objects when the member names are arbitrary strings or names.
|
|
Use arrays when the member names would be sequential integers. Use objects when the member names are arbitrary strings or names.
|
|
|
|
|
|
##### , (comma) Operator
|
|
#### , (comma) Operator
|
|
|
|
|
|
Avoid the use of the comma operator except for very disciplined use in the control part of for statements. (This does not apply to the comma separator, which is used in object literals, array literals, var statements, and parameter lists.)
|
|
Avoid the use of the comma operator except for very disciplined use in the control part of for statements. (This does not apply to the comma separator, which is used in object literals, array literals, var statements, and parameter lists.)
|
|
|
|
|
|
##### Block Scope
|
|
#### Block Scope
|
|
|
|
|
|
In JavaScript blocks do not have scope. Only functions have scope. Do not use blocks except as required by the compound statements.
|
|
In JavaScript blocks do not have scope. Only functions have scope. Do not use blocks except as required by the compound statements.
|
|
|
|
|
|
##### Assignment Expressions
|
|
#### Assignment Expressions
|
|
|
|
|
|
Avoid doing assignments in the condition part of if and while statements.
|
|
Avoid doing assignments in the condition part of if and while statements.
|
|
|
|
|
... | @@ -433,11 +433,11 @@ a correct statement? Or was |
... | @@ -433,11 +433,11 @@ a correct statement? Or was |
|
|
|
|
|
intended? Avoid constructs that cannot easily be determined to be correct.
|
|
intended? Avoid constructs that cannot easily be determined to be correct.
|
|
|
|
|
|
##### === and !== Operators.
|
|
#### === and !== Operators.
|
|
|
|
|
|
It is almost always better to use the === and !== operators. The == and != operators do type coercion. In particular, do not use == to compare against falsy values.
|
|
It is almost always better to use the === and !== operators. The == and != operators do type coercion. In particular, do not use == to compare against falsy values.
|
|
|
|
|
|
##### Confusing Pluses and Minuses
|
|
#### Confusing Pluses and Minuses
|
|
|
|
|
|
Be careful to not follow a + with + or ++. This pattern can be confusing. Insert parens between them to make your intention clear.
|
|
Be careful to not follow a + with + or ++. This pattern can be confusing. Insert parens between them to make your intention clear.
|
|
|
|
|
... | @@ -447,7 +447,7 @@ is better written as |
... | @@ -447,7 +447,7 @@ is better written as |
|
total = subtotal + (+myInput.value);
|
|
total = subtotal + (+myInput.value);
|
|
so that the + + is not misread as ++.
|
|
so that the + + is not misread as ++.
|
|
|
|
|
|
##### eval is Evil
|
|
#### eval is Evil
|
|
|
|
|
|
The eval function is the most misused feature of JavaScript. Avoid it.
|
|
The eval function is the most misused feature of JavaScript. Avoid it.
|
|
|
|
|
... | @@ -456,8 +456,7 @@ eval has aliases. Do not use the Function constructor. Do not pass strings to se |
... | @@ -456,8 +456,7 @@ eval has aliases. Do not use the Function constructor. Do not pass strings to se |
|
|
|
|
|
|
|
|
|
|
|
|
|
#### References
|
|
###### References
|
|
|
|
|
|
|
|
|
|
[Code Conventions for the JavaScript Programming Language](http://javascript.crockford.com/code.html) |
|
[Code Conventions for the JavaScript Programming Language](http://javascript.crockford.com/code.html) |
|
|
|
|