The top 5 JavaScript issues in all our codebases

The top 5 JavaScript
issues in all our codebases
Phil Nash
Developer Advocate for Sonar

Phil Nash
Phil Nash
Phil Nash
twitter.com/philnash
@philnash@mastodon.social
linkedin.com/in/philnash
https://philna.sh
@philnash

The data
The data
The data
@philnash

JavaScript
Issues
JavaScript
Issues
JavaScript
Issues
@philnash

Clean Code
Clean Code
Clean Code
@philnash

John F. Woods - 1991 on
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.
comp.lang.c++
@philnash

The comma operator
The comma operator
The comma operator
if (condition)
avar = value, anothervar = anothervalue;
@philnash

The comma operator
The comma operator
The comma operator
if (condition)
avar = value; anothervar = anothervalue;
@philnash

Raymond Chen -
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.
The Old New Thing Microsoft Blog
@philnash

Clean Code
Clean Code
Clean Code
It runs better in production and
it is better to work with in development
@philnash

So what are the top 5
issues?
issues?
issues?
@philnash

So what are the top 5 issues?
JavaScript
1.
2.
3.
4.
5.
@philnash

JavaScript
1.
2.
3.
4.
5. Unused assignments should be removed
@philnash

Unused assignments should be
removed
removed
removed
foo = bar + baz;
foo = otherFunction();
1
2
foo = bar + baz;
1
foo = otherFunction();
2
@philnash

removed
removed
removed
function add(a, b) {
const result = a + b;
const foo = "hello";
return result;
}
@philnash

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

JavaScript
1.
2.
3.
4. "===" and "!==" instead of "==" and "!="
@philnash

==
==
==
==
https://dorey.github.io/JavaScript-Equality-Table/

===
===
===
===
https://dorey.github.io/JavaScript-Equality-Table/

JavaScript
1.
2.
3. Sections of code should not be commented out
@philnash

Sections of code should not be
commented out
commented out
commented out
@philnash

JavaScript
1. Use "let" or "const" instead of "var"
2.
@philnash

const and let
communicate
const and let
communicate
const and let
communicate
@philnash

JavaScript
1. Use "let" or "const" instead of "var"
2. Cognitive Complexity of functions should not
be too high
@philnash

Cognitive Complexity
🤷‍♂️
🤷‍♂️
🤷‍♂️
@philnash

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;
}
@philnash

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";
}
}
@philnash

Complexity
Complexity
Complexity
Cyclomatic complexity measures the number of paths
through a function
Cognitive complexity measures how easy it is to read a
function
@philnash

Creates a score by:
Incrementing for breaks in flow (loops/conditionals)
Incrementing a nesting score
@philnash

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";
}
}
@philnash

Cognitive Complexity of
functions should not be
too high
too high
too high
@philnash

Example
Example
Example
@philnash

@philnash

Tools
Tools
Tools
/
SonarCloud SonarQube
SonarLint
ESLint
eslint-plugin-sonarjs
@philnash

Other links
Other links
Other links
- Raymond Chen
Cognitive Complexity paper
Code is read much more often than it is written, so
plan accordingly
Sonar JavaScript Rules
🎉Reveal.js Confetti 🎉
@philnash

Clean Code
Clean Code
Clean Code
Clean as you code
Refactor complex functions
Code for readability
Code for future self
@philnash

Thank you
Thank you
Thank you
twitter.com/philnash
@philnash@mastodon.social
linkedin.com/in/philnash
https://philna.sh

The top 5 JavaScript issues in all our codebases

More Related Content

Similar to The top 5 JavaScript issues in all our codebases

Recently uploaded

The top 5 JavaScript issues in all our codebases