The data

JavaScript Issues

Clean Code

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. Code for readability.

The comma operator

if (condition)
  avar = value, anothervar = anothervalue;

The comma operator

if (condition)
  avar = value; anothervar = anothervalue;

Design for readability. Even if you don't intend anybody else to read your code, there's still a very good chance that somebody will have to stare at your code and figure out what it does: That person is probably going to be you, twelve months from now.

Clean Code

It runs better in production and
it is better to work with in development

So what are the top 5 issues?

So what are the top 5 issues?

So what are the top 5 issues?

Unused assignments
should be removed

            foo = bar + baz;
foo = otherFunction();

Unused assignments
should be removed

function add(a, b) {
  return result = a + b;
}

So what are the top 5 issues?

So what are the top 5 issues?

So what are the top 5 issues?

So what are the top 5 issues?

Sections of code should not be commented out

TypeScript break

So what are the top 5 issues?

TODO

function reallyImportantThing() {
  // TODO: implement this
}

So what are the top 5 issues?

Disallow .bind() and => functions in JSX props

class MyComponent() {
  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return (
      

        Click Me
      
    );
  }
}

Disallow .bind() and => functions in JSX props

class MyComponent() {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }
  
  render() {
    return (
      

        Click Me
      
    );
  }
}

So what are the top 5 issues?

Unnecessary imports should be removed

import { foo } from './foo';

// Never uses foo

Back to JavaScript

So what are the top 5 issues?

So what are the top 5 issues?

const and let communicate

So what are the top 5 issues?

So what are the top 5 issues?

So what are the top 5 issues?

Cognitive Complexity

🤷‍♂️

Cyclomatic Complexity

function sumOfPrimes(max) {        // +1
  let total = 0;
  for (let i = 2; i <= max; ++i) { // +1
    let prime = true;
    for (let j = 2; j < i; ++j) {  // +1
      if (i % j == 0) {            // +1
        prime = false;
      }
    }
    if (prime) {                   // +1
      total += i;
    }
  }
  return total;
}

Cyclomatic Complexity

export function getWords(number) { // +1
  switch (number) {
    case 1:                        // +1
      return "one";
    case 2:                        // +1
      return "a couple";
    case 3:                        // +1
      return "a few";
    case 4:                        // +1
      return "many";
    default:
      return "lots";
  }
}

Complexity

Cyclomatic complexity measures the number of paths through a function

Cognitive complexity measures how easy it is to read a function

Cognitive Complexity

Cognitive Complexity

function sumOfPrimes(max) {
  let total = 0;
  for (let i = 2; i <= max; ++i) { // +1
    let prime = true;
    for (let j = 2; j < i; ++j) {  // +2
      if (i % j == 0) {            // +3
        prime = false;
      }
    }
    if (prime) {                   // +2
      total += i;
    }
  }
  return total;
}

Cognitive Complexity

function getWords(number) {
  switch (number) {  // +1
    case 1: 
      return "one";
    case 2:
      return "a couple";
    case 3:
      return "a few";
    case 4:
      return "many";
    default:
      return "lots";
  }
}

Cognitive Complexity of functions should not be too high

Example

Cognitive Complexity

So what are the top 5 issues?

Tools

SonarCloud / SonarQube

SonarLint

ESLint

eslint-plugin-sonarjs

Other links

Cognitive Complexity paper

Code is read much more often than it is written, so plan accordingly - Raymond Chen

Sonar JavaScript Rules

🎉 Reveal.js Confetti 🎉

Clean Code

Clean as you code

Refactor complex functions

Code for readability

Code for future self