ACA Styleguide

styleguide.md

ACA Styleguide - Necessary vs Sugary Syntax

Things we will look for

• Does it stay consistent across more complex variations
• Is it visually grep-able for errors
• Does it translate to other targeted WebDev languages
  • Python
  • PHP
  • Ruby
• How far is it from the ES5 implementation?

Functions

const nums = [ 1, 2, 3 ];

// always use meaningful variable names, in this case
// you'll want to use the singular version of the plural
// name of the array, eg num vs. x

// Sugar level 0
// has context implications
nums.map(function(num) {
  return num * num;
});

// Sugar level 1
// Has parenthesis around single parameter
// Best variation for beginners, as it will
// stay consistent with multi-argument, complex
// functions
nums.map((num) => {
  return num * num;
});

// Sugar level 2
// Removes parenthesis around single parameter
// Can't use with multiple parameters
nums.map(num => {
  return num * num;
});

// Sugar level 3
// Uses implicit return, negating the need for
// brackets or semi colons. Can't use for complex
// functions. Actually breaks with inner semi-colon
nums.map( num => num * num );

Objects

const firstName = 'Kevin';
const lastName = 'Colten';
const email = 'kevin@austincodingacademy.com';


// Sugar level 0
// consistent with es5 and equivalent
// structures in other webdev languages
const kevin = {
  firstName: firstName,
  lastName: lastName,
  email: email,
  age: 30
}

// Sugar level 1
// Visually inconsistent
const kevin = {
  firstName,
  lastName,
  email,
  age: 30
}

Classes

from es6-cheatsheet

Prior to ES6, we implemented Classes by creating a constructor function and adding properties by extending the prototype:

function Person(name, age, gender) {
    this.name   = name;
    this.age    = age;
    this.gender = gender;
}

Person.prototype.incrementAge = function () {
    return this.age += 1;
};

And created extended classes by the following:

function Personal(name, age, gender, occupation, hobby) {
    Person.call(this, name, age, gender);
    this.occupation = occupation;
    this.hobby = hobby;
}

Personal.prototype = Object.create(Person.prototype);
Personal.prototype.constructor = Personal;
Personal.prototype.incrementAge = function () {
    Person.prototype.incrementAge.call(this);
    this.age += 20;
    console.log(this.age);
};

ES6 provides much needed syntactic sugar for doing this under the hood. We can create Classes directly:

class Person {
    constructor(name, age, gender) {
        this.name   = name;
        this.age    = age;
        this.gender = gender;
    }

    incrementAge() {
      this.age += 1;
    }
}

And extend them using the extends keyword:

class Personal extends Person {
    constructor(name, age, gender, occupation, hobby) {
        super(name, age, gender);
        this.occupation = occupation;
        this.hobby = hobby;
    }

    incrementAge() {
        super.incrementAge();
        this.age += 20;
        console.log(this.age);
    }
}