The Importance of Clean Code

Good, clean code is like a good book - it's easy to understand and a pleasure to read.

The Boy Scout Rule:

Leave the campground cleaner than you found it

Naming

• Use intention-revealing names

                      
                          ❌ const d = new Date();
                      
                  

                      
                          ✅ const date = new Date();
                      
                  

Naming

• Avoid disinformation

                      
                          ❌ const dc;
                      
                  

                      
                          ✅ const daysCounter;
                      
                  

Naming

• Make meaningful distinctions

                      
                          {
                              ❌ const date1 = new Date('2014-09-16');
                              ❌ const date2 = new Date();
                          }
                      
                  

                      
                          {
                              ✅ const firstDate = new Date('2014-09-16');
                              ✅ const currentDate = new Date();
                          }
                      
                  

Naming

• Use pronounceable names

                      
                          ❌ const crymdhms; // creation year, month, day, ...
                      
                  

                      
                          ✅ const creationTimestamp;
                      
                  

Naming

• Use nouns for class names

  Dog

• Use verbs for methods names

  Dog.bark()

  Use get, set, is for accessor, mutators and predicates

Naming

• Pick one word per concept (consistency)

  ✅ UserController, TransactionController, WalletController

  ❌ UserController, TransactionDriver, WalletManager

Naming

• Use different names for semantically different methods

                      
                          {
                              balance.add(2) // 2 + 2 = 4
                              transactions.insert(2) // [2, 2]
                          }
                      
                  

Naming

• Use solution domain names

  Computer science, math, algorithm terms, design patterns

                      
                          ❌ CoinMarket
                      
                

                      
                          ✅ CoinMarketAPI
                      
                

Naming

• Use problem domain names

                      
                          ❌ InterestForArtistPayment
                      
                

                      
                          ✅ RoyaltyPayment
                      
                

Functions

• Be small
  • Under 20 lines
  • One or two level of indentation
• Do one thing

Solution: Decompose!

Functions

• Command-query separation

                
                    ❌
                    if (user.set('name', 'John')) { ... }
                
            

                
                    {
                        ✅
                        user.set('name', 'John');
                        if (user.hasName()) { ... }
                    }
                
            

Functions

• Have no side effect

                      
                          {
                              function logIn (userName, password) {
                                  if (verifyPassword(userName, password)) {
                                      setLoggedIn(userName);
                                      ❌ redirectToProfile();
                                  } else {
                                      showError('Incorrect credentials!')
                                  }
                              }
                      
                  

Functions

• Have no side effect

                      
                          {
                              function logIn (userName, password) {
                                  if (verifyPassword(userName, password)) {
                                      setLoggedIn(userName);
                                  } else {
                                      showError('Incorrect credentials!')
                                  }
                              }
  
                              if(isLoggedIn()) {
                                  ✅ redirectToProfile()
                              }
                          }
                      
                  

Functions

• Arguments
  • As few arguments as possible
  • 3 or more might be converted into object or list
  • Avoid flag arguments

Functions

• Errors
  • Throw exceptions

            
                ❌
                console.log(e)
            
          

            
                ✅
                throw new Error(e)
            
          

Functions

• Errors
  • Error handling is one thing
  • Extract try/catch blocks

Functions

DRY (Don't Repeat Yourself)

Classes

• Be small (responsibility-wise)
• Follow Single Responsibility Principle

Comments

• Comments do not make up for the bad code

                
                    ❌
                    // Check if the employee is eligible for benefits
                    if (employee.hours === REQUIRED_HOURS && employee.age > 65)
                
            

                
                    ✅ if(employee.isEligibleForBenefits())
                
            

Comments

• Good comments:
  • Legal comments
  • Explanation of intent
  • Warning comments
  • TODO comments

Comments

• Bad comments:
  • Redundant comments
  • Misplaced comments
  • JSDOC in non-public code

TDD

• Tests come first
• Red => Green => Refactor
• One assert per test

TDD

• F.I.R.S.T.
  • Fast
  • Independent
  • Repeatable
  • Self-validating
  • Timely

Team rules

• Come up with consistency
• Compromise
• Do code review

Thank you!