Styling Guidelines

There are many opinions on the "ideal" style in the world of Software Development. Therefore, in order to reduce the confusion on what style students should follow, we urge you to refer to this style guide.

General Formatting Rules

Trailing Whitespace

Remove trailing white spaces.

Trailing white spaces are unnecessary and can complicate diffs.

Example
const name = "John Smith";__

Recommended:

const name = "John Smith";

Indentation

Indentation should be consistent throughout the entire file. Whether you choose to use tabs or spaces, or 2-spaces vs. 4-spaces - just be consistent!

Encoding

Use UTF-8.

Make sure your editor uses UTF-8 as character encoding, without a byte order mark.

General Meta Rules

Comments

Use comments pragmatically. The code must explain itself. Add comments when further clarification is needed.

Action Items

Mark todos and action items with TODO:.

Highlight todos by using the keyword TODO only, not other formats like @@. Append action items after a colon like this: TODO: action item.

Example

Recommended:

// TODO: add other fruits

JavaScript Language Rules

Variable Declaration

Declare your variables with const, first. If you find that you need to reassign the variable later, use let. There isn't a good reason to use the var keyword anymore for variable declaration.

Semicolons

Always use semicolons.

Relying on implicit insertion can cause subtle, hard to debug problems. Semicolons should be included at the end of function expressions, but not at the end of function declarations.

Example

Not Recommended:

const foo = () => {
    return true // Missing semicolon
} // Missing semicolon

function foo() {
    return true;
}; // Extra semicolon

Recommended:

const foo = () => {
    return true;
};

function foo() {
    return true;
}

Wrapper Objects for Primitive Types

There's no reason to use wrapper objects for primitive types. However, type casting is okay.

Example

Not Recommended:

const x = new Boolean(0);
if (x) {
    alert("hi");    // Shows 'hi' because typeof x is truthy object
}

Recommended:

const x = Boolean(false);
if (x) {
    alert("hi");    // Show 'hi' because typeof x is a falsey boolean
}

Closures

Yes, but be careful.

The ability to create closures is one the most useful (and often overlooked) feature in JavaScript. One thing to keep in mind, however, is that a closure keeps a pointer to its enclosing scope. As a result, attaching a closure to a DOM element can create a circular reference and thus, a memory leak.

Example

Not Recommended:

function foo(element, a, b) {
    element.onclick = function() { /* uses a and b */ }
}

Recommended:

function foo(element, a, b) {
    element.onclick = bar(a, b);
}

function bar(a, b) {
    return function() { /* uses a and b */ }
}

Array and Object Literals

Use Array and Object literals instead of Array and Object constructors.

Example

Not Recommended:

const myArray = new Array(x1, x2, x3);

const myObject = new Object();
myObject.a = 0;

Recommended:

const myArray = [x1, x2, x3];

const myObject = {
    a: 0
};

JavaScript Style Rules

Naming

In general, functionNamesLikeThis, variableNamesLikeThis, ClassNamesLikeThis, methodNamesLikeThis, CONSTANT_VALUES_LIKE_THIS and filenameslikethis.js (unless the file contains a class in which case ClassNameLikeThis.js).

Code Formatting

Because of implicit semicolon insertion, always start your curly braces on the same line as whatever they're opening.

Example

Recommended:

if (something) {
    // Do something
} else {
    // Do something else
}

Not Recommended:

if (something) 
{
    // Do something
} 
else 
{
    // Do something else
}

Array/Object literals

Single-line array and object initializers are recommended when they fit on one line. Otherwise use multiline initializers.

Example

There should be no spaces after the opening bracket or before the closing bracket:

const array = [1, 2, 3];
const object = {a: 1, b: 2, c: 3};

Multiline array and object initializers are indented one-level, with the braces on their own line, just like blocks:

const array = [
    "Joe <joe@email.com>",
    "Sal <sal@email.com>",
    "Murr <murr@email.com>",
    "Q <q@email.com>"
];

const object = {
    id: "foo",
    class: "foo-important",
    name: "notification"
};

Parentheses, Brackets

Use them, even when you can get away with not using them. They generally make for a more readable code.

String literal

For consistency double-quotes (") are preferred over single-quotes (").

Use template literal for multiline strings.

Conditional Ternary Operator

The conditional ternary operator is recommended, although not required, for writing concise code.

Example

Not Recommended:

if (val) {
    return foo();
} else {
    return bar();
}

Recommended:

return val ? foo() : bar();

&& and ||

These binary boolean operators are short-circuited and evaluate to the last evaluated term. They are often used for purposes other than boolean expression.

Example

The || has been called the default operator because you can write this:

const foo = (name) => {
    const theName = name || 'John';
};

instead of:

const foo = (name) => {
    const theName;
    if (name) {
        theName = name;
    } else {
        theName = 'John';
    }
};

Using the boolean operators in capacity other than creating boolean expression is discouraged. There are usually better alternatives.

Example

You can do this for default argument:

const foo = (name = "John") => {
    const theName = name || 'John';
};