BlogContactLinkedInProjects

Personal coding style guide 💄

05 March, 2020 - 2 min read

Some guidelines to consider when writing code to enhance simplicity and improve legibility for an enhanced developer experience.

  • Prefer let.

    let reads more intuitively.

    let foo = 'bar';  // reads: let foo be bar


  • Prefer const to communicate immutability.

    Immutable stuff NEVER changes.

    const PORT = process.env.PORT; // Ideally this shouldn't change at runtime.
    const dayToHours = 24; // This never changes.
    
    // This may be controversial since it's properties are mutable. Prefer `let`
    const foo = { bar: 'baz' };
    foo.bar = 'foo'; // This works ☹

    Learn more

  • Prefer descriptive names.

    This improves legibility and decreases the learning curve, making it easier to understand the logic.

    TIP: One approach is specifying the content followed by data structure/type.

    let az = ['a', 'b', 'c'];  // bad
    let alphabets = ['a', 'b', 'c'];  // good
    let alphabetList = ['a', 'b', 'c'];  // better
    
    let alphabetPositionMap = { a: 1, b: 2, c: 3 };
    
    function getAlphabetList(limit) {
      return alphabelList.slice(0, limit)
    }


  • Prefer function declarations at the top level.

    This takes advantage of function hoisting, allowing functions to be declared and used wherever i.e. declarations don't have to flow from top to bottom.

    function foo() {
      /* 
       * baz can be called here 
       * regardless of its declaration appearing after foo
      */
      return baz();
    }
    
    function baz() {
      return 'bar';
    }


  • Prefer functional composition over multi-functional abstraction.

    Implement the single responsibility principle and extend functionality through composition for simplicity.

    let personalInfoMap = { firstName: 'foo', lastName: 'bar', age: 0 };
    
    function getName(personalInfoMap, type, salutation = '') {
      let name = '';
    
      if(type === 'first') {
        name = personalInfoMap.firstName;
      }
    
      if(type === 'last') {
        name = personalInfoMap.lastName;
      }
    
      if(type === 'full') {
        name = `${personalInfoMap.firstName} ${personalInfoMap.lastName}`;
      }
    
      return `${salutation} ${name}`.trim();
    }
    
    let fullNameSalute = withSalutation(personalInfoMap, 'full', 'Mr');

    Refactor:

    let personalInfoMap = { firstName: 'foo', lastName: 'bar', age: 0 };
    
    function getFirstName(personalInfoMap) {
        return personalInfoMap.firstName;
    }
    
    function getLastName(personalInfoMap) {
      return personalInfoMap.lastName;
    }
    
    function getFullName(personalInfoMap) {
      return `${personalInfoMap.firstName} ${personalInfoMap.lastName}`;
    }
    
    function withSalutation(salutation, personalInfoMap, getName) {
      let name = getName(personalInfoMap);
      return `${salutation} ${name}`
    }
    
    let fullNameSalute = withSalutation('Miss', personalInfoMap, getFullName);
  • coding
  • style
  • syntax