JavaScript Styleguide

Style Guide

Writing Functions

Overloading

// GOOD 
const _ = require("lodash");
...
function website(html, css, js, options) {
  // website(options)
  if(!(css || js || options) && _.isPlainObject(html)) {
    options = html;
    html = undefined;
  }
  // website(html, options)
  else if(!(js || options) && _.isPlainObject(css)) {
    options = css;
    css = undefined;
  }
  // website(html, css, options)
  else if(!options && _.isPlainObject(js)) {
    options = js;
    js = undefined;
  }

  html = html || "";
  css = css || "";
  js = js || "";

  // Code here...
}

// OKAY
function website(html, css, js, options) {
  // website(options)
  if(!(css || js || options) && typeof html === "object") {
    options = html;
    html = undefined;
  }
  // website(html, options)
  else if(!(js || options) && typeof css === "object") {
    options = css;
    css = undefined;
  }
  // website(html, css, options)
  else if(!options && typeof js === "object") {
    options = js;
    js = undefined;
  }

  html = html || "";
  css = css || "";
  js = js || "";

  // Code here...
}

// BAD
function website(html, css, js, options) {
  // website(options)
  if(!(css || js || options) && typeof html === "object") {
    options = html;
    html = undefined;
  }
  // website(html, options)
  if(!(js || options) && typeof html === "string" && typeof css === "object") {
    options = css;
    css = undefined;
  }
  // website(html, css, options)
  if(!options && typeof html === "string" && typeof css === "string" && typeof js === "object") {
    options = js;
    js = undefined;
  }

  html = html || "";
  css = css || "";
  js = js || "";

  // Code here...
}

// VERY BAD
function website(html, css, js, options) {
  // website()
  if(!(html || css || js || options)) {
    html = "";
    css = "";
    js = "";
  }
  // website(html)
  if(!(css || js || options) && typeof html === "string") {
    css = "";
    js = "";
  }
  // website(options)
  if(!(css || js || options) && typeof html === "object") {
    options = html;
    html = "";
    css = "";
    js = "";
  }
  // website(html, css)
  if(!(js || options) && typeof html === "string" && typeof css === "string") {
    js = "";
  }
  // website(html, options)
  if(!(js || options) && typeof html === "string" && typeof css === "object") {
    options = css;
    css = "";
    js = "";
  }
  // website(html, css, options)
  if(!options && typeof html === "string" && typeof css === "string" && typeof js === "object") {
    options = js;
    js = "";
  }

  // Code here...
}

// VERY BAD - NEVER DO THIS!!!
function website(html, css, js, options) {
  // website()
  if(!(html || css || js || options)) {
    html = "";
    css = "";
    js = "";
    // Code here...
  }
  // website(html)
  if(!(css || js || options) && typeof html === "string") {
    css = "";
    js = "";
    // Code here...
  }
  // website(options)
  if(!(css || js || options) && typeof html === "object") {
    options = html;
    html = "";
    css = "";
    js = "";
    // Code here...
  }
  // website(html, css)
  if(!(js || options) && typeof html === "string" && typeof css === "string") {
    js = "";
    // Code here...
  }
  // website(html, options)
  if(!(js || options) && typeof html === "string" && typeof css === "object") {
    options = css;
    css = "";
    js = "";
    // Code here...
  }
  // website(html, css, js)
  if(!options && typeof html === "string" && typeof css === "string" && typeof js === "string") {
    // Code here...
  }
  // website(html, css, options)
  if(!options && typeof html === "string" && typeof css === "string" && typeof js === "object") {
    options = js;
    js = "";
    // Code here...
  }
  // website(html, css, js, options)
  if(!options && typeof html === "string" && typeof css === "string" && typeof js === "object") {
    // Code here...
  }
}

Writing Tests

Imports

// GOOD
const _ = require("lodash");
const { assert, expect } = require('chai');
const should = require('chai').should();

// BAD
let _ = require("lodash");
let { assert, expect } = require('chai');
let should = require('chai').should();

// BAD
var _ = require("lodash");
var { assert, expect } = require('chai');
var should = require('chai').should();

// VERY BAD
var _ = require("lodash");
var assert = require('chai');
var expect = require('chai');
var should = require('chai').should();

Describing Classes

// GOOD
describe("Neuron", function() {
  describe("neuron.activate()", function() {
    it("neuron.activate() => {number}", ...)
    it("neuron.activate(input) => {number}", ...)
    it("neuron.activate(options) => {number}", ...)
    it("neuron.activate(input, options) => {number}", ...)
  })
})

// BAD
describe("Neuron", function() {
  describe("neuron.activate()", function() {
    it("neuron.activate() => {number}", ...)
    it("neuron.activate(number) => {number}", ...)
    it("neuron.activate(object) => {number}", ...)
    it("neuron.activate(number, object) => {number}", ...)
  })
})

// VERY BAD
describe("Neuron", function() {
  describe("neuron.activate()", function() {
    it("should return a number when no parameters are passed", ...)
    it("should return a number when one real number is passed a parameter", ...)
    it("should return a number when an options object is passed as a parameter", ...)
    it("should return a number when a one real number and an options object are passed as parameters", ...)
  })
})

Describing Functions

// GOOD
describe("sum()", function() {
  it("sum(number, other) => {number}", ...)
  it("sum(...numbers) => {number}", ...)
  it("sum(numbers) => {number}", ...)
})

// BAD
describe("Sum", function() {
  it("sum(number, other) => {number}", ...)
  it("sum(...numbers) => {number}", ...)
  it("sum(numbers) => {number}", ...)
})

// VERY BAD
describe("sum()", function() {
  it("should return a number when two numbers are passed as parameters", ...)
  it("should return a number when many number are passed as parameters", ...)
  it("should return a number when an array of numbers is passed as a parameter", ...)
})