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

2. @philnash

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

4. The data
The data
The data
@philnash

5. JavaScript
Issues
JavaScript
Issues
JavaScript
Issues
@philnash

6. Clean Code
Clean Code
Clean Code
@philnash

7. 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

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

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

10. 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

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

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

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

14. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1.
2.
3.
4.
5. Unused assignments should be removed
@philnash

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

16. Unused assignments should be
removed
Unused assignments should be
removed
Unused assignments should be
removed
function add(a, b) {
const result = a + b;
const foo = "hello";
return result;
}
@philnash

17. Unused assignments should be
removed
Unused assignments should be
removed
Unused assignments should be
removed
function add(a, b) {
return result = a + b;
}
@philnash

18. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1.
2.
3.
4.
5. Unused assignments should be removed
@philnash

19. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1.
2.
3.
4. "===" and "!==" instead of "==" and "!="
5. Unused assignments should be removed
@philnash

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

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

22. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1.
2.
3.
4. "===" and "!==" instead of "==" and "!="
5. Unused assignments should be removed
@philnash

23. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1.
2.
3. Sections of code should not be commented out
4. "===" and "!==" instead of "==" and "!="
5. Unused assignments should be removed
@philnash

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

25. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1.
2.
3. Sections of code should not be commented out
4. "===" and "!==" instead of "==" and "!="
5. Unused assignments should be removed
@philnash

26. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1. Use "let" or "const" instead of "var"
2.
3. Sections of code should not be commented out
4. "===" and "!==" instead of "==" and "!="
5. Unused assignments should be removed
@philnash

27. const and let
communicate
const and let
communicate
const and let
communicate
@philnash

28. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1. Use "let" or "const" instead of "var"
2.
3. Sections of code should not be commented out
4. "===" and "!==" instead of "==" and "!="
5. Unused assignments should be removed
@philnash

29. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1. Use "let" or "const" instead of "var"
2. Cognitive Complexity of functions should not
be too high
3. Sections of code should not be commented out
4. "===" and "!==" instead of "==" and "!="
5. Unused assignments should be removed
@philnash

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

31. Cyclomatic Complexity
Cyclomatic 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;
}
@philnash

32. Cyclomatic Complexity
Cyclomatic Complexity
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";
}
}
@philnash

33. 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

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

35. Cognitive Complexity
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;
}
@philnash

36. Cognitive Complexity
Cognitive Complexity
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";
}
}
@philnash

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

38. Example
Example
Example
@philnash

39. Cognitive Complexity
Cognitive Complexity
Cognitive Complexity
@philnash

40. So what are the top 5 issues?
So what are the top 5 issues?
So what are the top 5 issues?
JavaScript
1. Use "let" or "const" instead of "var"
2. Cognitive Complexity of functions should not
be too high
3. Sections of code should not be commented out
4. "===" and "!==" instead of "==" and "!="
5. Unused assignments should be removed
@philnash

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

42. 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

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

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