Table of Contents
- Node Modules
- HTML
- Styles (CSS/SCSS)
- JavaScript/TypeScript
- JavaScript
- TypeScript specific standards
- General best practices
JAVASCRIPT/TYPESCRIPT
JAVASCRIPT
CONSIDER PLACING JAVASCRIPT SCRIPTS AT THE BOTTOM
When loading a script, the browser cannot continue until the entire file has been loaded. If we have JavaScript files in order to add functionality, we should place those files at the bottom, just before the closing body tag. This is a good performance practice and the results are quite noticeable.
WHITESPACING AND FORMATTING
ALWAYS USE BRACES
// Don't do this
if (blah === "foo")
bar("foo");
// Do this instead
if (blah === "foo") {
bar("foo");
}
SAME LINE BRACES
// Don't do this
if (blah === "foo")
{
bar("foo");
}
// Do this instead
if (blah === "foo") {
bar("foo");
}
Main reason for this is simply that is a JavaScript pitfall, but also it looks nicer.
CHARACTER SPACING
- Use a single space between values, variables, and operators.
- Use a single space after commas.
// Don't do this
var x=123;
var baz="Concatenated string"+x;
if(blah==="foo"){
foo("bar",baz);
}
// Do this instead
var x = 123;
var baz = "Concatenated string" + x;
if (blah === "foo") {
foo("bar", baz);
}
USE 4 SPACES INDENTATION
// Don't do this
if (blah === "foo") {
foo("bar");
}
// Do this instead
if (blah === "foo") {
foo("bar");
}
ALWAYS USE SEMICOLON
// Don't do this
var foo = true
if (foo) {
bar()
}
// Do this instead
var foo = true;
if (foo) {
bar();
}
ALWAYS USE COMPARISON
// Don't do this
if (blah == "foo") {
foo("bar");
}
// Do this instead
if (blah === "foo") {
foo("bar");
}
The use of the == equality operator allows frustrating bugs to slip through almost undetected while the use of the strict equality operator === does not run type coercion and therefore strictly evaluates the difference between two objects.
EXCEPTION
Double equals comparison is allowed when comparing to null, because it will detect both null or undefined properties. Here a great article about this exception and here the MDN Web Docs.
var foo = null;
// `foo` is null, but `bar` is undefined as it has not been declared...
if (foo == null && bar == null) {
// ...still get in here
}
AVOID COMPARING TO TRUE AND FALSE
// Don't do this as it's redundant
if (foo === true) {
blah("foo");
}
if (bar === false) {
blah("bar");
}
// Do this instead
if (foo) {
blah("foo");
}
if (!bar) {
blah("bar");
}
VARIABLES
Use meaningful names when creating a variable: think about how the variable is going to serve your purpose. If the variable is caching a jQuery CSS selector, give it the name of the selector prefixed with $.
CAMEL CASE VARIABLES
The camel casing (or camelCasing) of JavaScript variables is accepted as the standard in most coding environments. The only exception is the use of uppercase to denote constants and underscores to denotate private variables (TypeScript).
// Don't do this
let MyVar = "blah";
// Do this instead
let myVar = "blah";
BOOLEAN VARIABLES
Booleans should be easily identifiable by the way they are named. Use prefixes like is, can or has to propose a question.
// Do this
let isEditing = true;
obj.canEdit = true;
user.hasPermission = true;
USE TERNARY IF STATEMENT WHENEVER POSSIBLE AND EASY TO READ
// Don't do this
if (foo) {
blah("foo");
} else {
blah("bar");
}
// Do this instead
foo ? blah("foo") : blah("bar");
AVOID POLLUTING THE GLOBAL NAMESPACE
The chance of script and variable conflicts is increased, and both the source file and the namespace itself become littered with countless ambiguously named variables.
CHECK EXISTANCE OF VARIABLES, ARRAYS AND OBJECTS
if (element) {
// element exists
} else {
// element does not exists
}
This simple if statement is returning false for all of the following:
undefined: if the value, array or object is not defined;null: if the value, array or object is null;'': if the value is an empty string;0: if the value is number zero;NaN: if the value is not a number;false: if the value is a boolean false.
Please note that the same if statement is always returning true for all of the following:
- empty arrays
[]and empty objects{}: because they are defined; - spaced string
' ': because it is a valid and defined object.
TYPESCRIPT SPECIFIC STANDARDS
WHITESPACING AND FORMATTING
INCLUDE A SINGLE SPACE AFTER COLON AND BEFORE AND AFTER EQUAL
// Don't do this
let str : string = 'This is a definition of a string';
let bool :boolean= false;
let nr:number=123;
// Do this instead
let str: string = 'This is a definition of a string';
let bool: boolean = false;
let nr: number = 123;
ALWAYS DEFINE STRICT TYPE WHEN DECLARING VARIABLES
// Don't do this
let str = 'This is a definition of a string';
let bool = false;
let nr = 123;
// Do this instead
let str: string = 'This is a definition of a string';
let bool: boolean = false;
let nr: number = 123;
INCLUDE A SINGLE SPACE BEFORE AND AFTER CURLY BRAKETS WHEN IMPORTING
// Don't do this
import {ComponentName} from './path/to/component';
// Do this instead
import { ComponentName } from './path/to/component';
USE SINGLE QUOTES IN TYPESCRIPT FILES
// Don't do this
import { ComponentName } from "./path/to/component";
let str: string = "This is a definition of a string";
// Do this instead
import { ComponentName } from './path/to/component';
let str: string = 'This is a definition of a string';
INCLUDE BLANK LINE SEPARATOR BETWEEN IMPORTS AND THE REST OF THE CODE
// Don't do this
import { ComponentName } from './path/to/component';
let str: string = 'This is a definition of a string';
// Do this instead
import { ComponentName } from './path/to/component';
let str: string = 'This is a definition of a string';