code-smells.md

video

types of smells

• Convoluted Code Smell
• Copy Paste Code Smell
• Switch Statement Smell
• The This Abyss Smell
• Crisp Concatenation Smell
• jQuery Inquiry
• Temperamental Timer Smell
• Repeat Reassign Smell
• Inappropriate Intimacy Smell
• Incessant Interaction Smell
• Anonymous Algorithm Smell
• Unconfirmed Code Smell
• Two-Way Data Binding Smell

what is smelly

• too many statements
• too deep nesting
• too complex
  • jshint and eslint have statemtns for these three things!
  • max-statements, max-depth, complexity, max-len, max-params, max-nested-callbacks (eslint only)

how to avoid/fix smells

• use jshint/eslint/whatever
• refactor
• make unit tests

resources

• jshint
• eslint -- can create your own rules
• jscomplexity
• escomplex
• jasmine -- unit testing

copy paste code smell

• tools can inspect copy and pasting!
• jsinspect
• jscpd -- supports languages other than js

switch statement smell

• violates the open/closed principle
  • class/module/func should be open for extension without having to modify the inner parts of the c/m/f
• how to fix? separate out/abstract those switch cases into their own funcs/modules

var that = this;

• not the way to do thangs
• ways to solve
  • bind
  • second parameter of forEach -->

this.teeth.forEach(function(tooth, this) {
  this.clean(tooth);
});
//vs
this.teeth.forEach(function(tooth) {
  this.clean(tooth);
}, this);

• => in ES6 passes this from the outer context into the inner context
• or just use functional programming if you're only doing one thing inside the forEach -- pass the function right to the other function

this.teeth.forEach(this.clean.bind(this)); // bind b/c clean uses this inside of itself

crisp concat

• things like + this + can get + annoying
• tweet sized js templating engine by thomasfuchs
• es6 string templates interpolation
• es6 template strings multiline

inappropriate intimacy smell

• tightly coupled dependencies
• ways to solve
  • dependency injection
  • message broker -- channel.subscribe... try postal message library

more eslint rules

• eslint-plugin-react