Pure javascript. Testing. Formatting Comments

I offer Habrahabr readers a translation of Ryan McDermott 's Clean-code-javascript book.

Table of contents

• Introduction
• Variables
• Functions
• Classes
• Objects and data structures. Asynchrony. Error processing.
• Testing. Formatting Comments

Testing

Testing is a very important part of development. If you do not have tests or they are not enough, how can you be sure that you will not break anything? Your team should make a decision on the amount of code covered by the tests, but the more covered by the tests, the calmer the developer sleeps. This means that in addition to having a good testing tool, you also need to use a good tool to check the code coverage of the tests . There is no reason not to write tests. Here is a selection of good testing tools. Having picked up convenient for your command, write tests for each new module or feature. If you choose Test Driven Development TDD, this is fine, but the main thing is to make sure that the tests cover all your goals before developing a new code, or refactoring existing code.

One test - one description.

Poorly:
')

const assert = require('assert'); describe('MakeMomentJSGreatAgain', () => { it('  ', () => { let date; date = new MakeMomentJSGreatAgain('1/1/2015'); date.addDays(30); date.shouldEqual('1/31/2015'); date = new MakeMomentJSGreatAgain('2/1/2016'); date.addDays(28); assert.equal('02/29/2016', date); date = new MakeMomentJSGreatAgain('2/1/2015'); date.addDays(28); assert.equal('03/01/2015', date); }); }); 

Good:

 const assert = require('assert'); describe('MakeMomentJSGreatAgain', () => { it('  30 ', () => { const date = new MakeMomentJSGreatAgain('1/1/2015'); date.addDays(30); date.shouldEqual('1/31/2015'); }); it('     ', () => { const date = new MakeMomentJSGreatAgain('2/1/2016'); date.addDays(28); assert.equal('02/29/2016', date); }); it('     ', () => { const date = new MakeMomentJSGreatAgain('2/1/2015'); date.addDays(28); assert.equal('03/01/2015', date); }); }); 

Formatting

Formatting is subjective. There are no hard and fast rules to follow. The main rule is not to argue about formatting. There are a bunch of tools to automate this. Use only one!
Formatting is a waste of time and money for developers.

For things that do not fall under the scope of automatic formatting (indents, tabs or spaces, double or single quotes, etc.), see some guidelines.

Use one naming option.

JavaScript is untyped, so naming your variables, functions, etc. tells you a lot about them. These rules are subjective, so your team can choose the option that they want. No matter which option you choose, most importantly stick to your choice.

Poorly:

 const DAYS_IN_WEEK = 7; const daysInMonth = 30; const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude']; const Artists = ['ACDC', 'Led Zeppelin', 'The Beatles']; function eraseDatabase() {} function restore_database() {} class animal {} class Alpaca {} 

Good:

 const DAYS_IN_WEEK = 7; const DAYS_IN_MONTH = 30; const songs = ['Back In Black', 'Stairway to Heaven', 'Hey Jude']; const artists = ['ACDC', 'Led Zeppelin', 'The Beatles']; function eraseDatabase() {} function restoreDatabase() {} class Animal {} class Alpaca {} 

Related functions should be nearby

If the function calls another, save these functions vertically close to the source file. Ideally, a function that uses another function should be directly above it. We tend to read the code from top to bottom like a newspaper. Because of this, it is convenient to place the code in this way.
Poorly:

 class PerformanceReview { constructor(employee) { this.employee = employee; } lookupPeers() { return db.lookup(this.employee, 'peers'); } lookupManager() { return db.lookup(this.employee, 'manager'); } getPeerReviews() { const peers = this.lookupPeers(); // ... } perfReview() { this.getPeerReviews(); this.getManagerReview(); this.getSelfReview(); } getManagerReview() { const manager = this.lookupManager(); } getSelfReview() { // ... } } const review = new PerformanceReview(user); review.perfReview(); 

Good:

 class PerformanceReview { constructor(employee) { this.employee = employee; } perfReview() { this.getPeerReviews(); this.getManagerReview(); this.getSelfReview(); } getPeerReviews() { const peers = this.lookupPeers(); // ... } lookupPeers() { return db.lookup(this.employee, 'peers'); } getManagerReview() { const manager = this.lookupManager(); } lookupManager() { return db.lookup(this.employee, 'manager'); } getSelfReview() { // ... } } const review = new PerformanceReview(employee); review.perfReview(); 

Comments

Comment only on code that describes complex business logic.

Comments are optional. Good code describes itself.

Poorly:

 function hashIt(data) { //  let hash = 0; //   const length = data.length; //      for (let i = 0; i < length; i++) { //  . const char = data.charCodeAt(i); //   hash = ((hash << 5) - hash) + char; //   32-  hash &= hash; } } 

Good:

 function hashIt(data) { let hash = 0; const length = data.length; for (let i = 0; i < length; i++) { const char = data.charCodeAt(i); hash = ((hash << 5) - hash) + char; //   32-  hash &= hash; } } 

Do not comment on unnecessary code.

For this there are version control systems. Leave the old code in the history of the version control system.

Poorly:

 doStuff(); // doOtherStuff(); // doSomeMoreStuff(); // doSoMuchStuff(); 

Good:

 doStuff(); 

Do not log comments

Remember: you need to use a version control system! There is no need for non-executable code, commented code, and especially in the comment log.
Use git log to get the story!

Poorly:

 /** * 2016-12-20: Removed monads, didn't understand them (RM) * 2016-10-01: Improved using special monads (JP) * 2016-02-03: Removed type-checking (LI) * 2015-03-14: Added combine with type-checking (JR) */ function combine(a, b) { return a + b; } 

Good:

 function combine(a, b) { return a + b; } 

Avoid positional markers

They tend to just get in the way. Let the functions and variable names, together with the corresponding indentation and formatting, give the visual structure of the code.

Poorly:

 //////////////////////////////////////////////////////////////////////////////// // Scope Model Instantiation //////////////////////////////////////////////////////////////////////////////// $scope.model = { menu: 'foo', nav: 'bar' }; //////////////////////////////////////////////////////////////////////////////// // Action setup //////////////////////////////////////////////////////////////////////////////// const actions = function() { // ... }; 

Good:

 $scope.model = { menu: 'foo', nav: 'bar' }; const actions = function() { // ... };