Clean code best practice for JavaScript

1. Clean Code JavaScriptReadable, reusable, and refactorable JavaScript code

2. @rizafahmi

3. Clean Code
what
is
Best Practices
some
Tooling
some

4. Clean Code
what
is

5. “Any fool can write code that a
computer can understand. Good
programmers write code that humans
can understand.”
—Martin Fowler

6. How to measure
code quality?

8. “Working code isn’t necessarily
good code. Your code also needs
to be easy to read, understand,
and modify.”
— Brandon Gregory

9. Clean Coderecap

10. Write code for human
Quality means easy to read,
understand, and modify

11. Best Practices
some

12. “There are only two hard things in
Computer Science: cache
invalidation and naming things.”
— Martin Fowler

13. Variables

14. Intention-revealing,
searchable names

15. let d;
let elapsed;
const ages = arr.map(i => i.age);

16. let daysSinceModification;
const agesOfUsers = users.map(user => user.age);

17. Meaningful distinctions and don't
add extra, unnecessary nouns

18. let nameString;
let theUsers;

19. let name;
let users;

20. Easy to pronounce

21. let fName, lName;
let cntr;
let full = false;
if (cnrt.size > 100) {
full = true;
}

22. let firstName, lastName;
let counter;
const MAX_CART_SIZE = 100;
// ...
const isFull = cart.size > MAX_CART_SIZE;

23. Functions

24. “Functions should do one thing.
They should do it well. They should
do it only.” — Robert C. Martin

25. function getUserRouteHandler (req, res) {
const { userId } = req.params;
// inline SQL query
knex('user')
.where({ id: userId })
.first()
.then(user => res.json(user));
}

26. // User model (eg. models/user.js)
const tableName = 'user';
const User = {
getOne (userId) {
return knex(tableName)
.where({ id: userId })
.first();
}
}
// route handler (eg. server/routes/user/get.js)
function getUserRouteHandler (req, res) {
const { userId } = req.params;
User.getOne(userId)
.then(user => res.json(user));
}

27. Use long, descriptive names

28. /**
* Invite a new user with its email address
* @param {String} user email address
!*/
function inv (user) {
!/* implementation !*/
}

29. function inviteUser (emailAddress) {
/* implementation */
}

30. Avoid long argument list

31. function createMenu(title, body, buttonText,
cancellable) {
// ...
}

32. function createMenu({ title, body,
buttonText, cancellable }) {
// ...
}
createMenu({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
});

33. function createMenu({ title, body,
buttonText, cancellable }) {
// ...
}
createMenu({
body: 'Bar',
title: ‘Foo',
cancellable: true,
buttonText: ‘Baz'
});

34. Reduce side effect

35. let values = { a: 1 };
let b = 1;
function impureFunction (items) {
items.a = items.a * b + 2;
return items.a;
}
let c = impureFunction(values);
// `values.a` is 3, the impure function modifies it.

36. let values = { a: 1 };
function pureFunction (a) {
let b = 1;
a = a * b + 2;
return a;
}
let c = pureFunction(values.a);
// `values.a` has not been modified, it's still 1

37. Avoid callbacks

38. asyncFunc1((err, result1) => {
asyncFunc2(result1, (err, result2) => {
asyncFunc3(result2, (err, result3) => {
console.lor(result3);
});
});
});

39. asyncFuncPromise1()
.then(asyncFuncPromise2)
.then(asyncFuncPromise3)
.then(result => console.log(result))
.catch(err => console.error(err));

40. const asyncFunc1 = async (err, result1) => {
const result2 = await asyncFunc2(result1);
const result3 = await asyncFunc3(result2);
console.log(result3);
}

41. Best Practicesrecap

42. Write meaningful, searchable names
Functions should do one thing only
Avoid callbacks, use async/await instead
Reduce impure functions, use pure one

43. Tooling
some

44. eslint

45. Tool that analyzes source code to
flag programming errors, bugs,
stylistic errors, and suspicious
constructs.

46. $ npm install -D eslint
$ ./node_modules/.bin/eslint --init

47. {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
.eslintrc.json

48. {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
}
.eslintrc.json

49. {
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
}
.eslintrc.json

50. {
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
.eslintrc.json

51. {
"scripts": {
"start": "parcel index.html",
"test": "jest",
"lint": "eslint src/*.js”,
“lint:fix”: "eslint src/*.js —fix”
}
}
package.json

52. $ npm run lint
$ npm run lint:fix

53. prettier

54. Opinionated code formatter.

55. $ npm install -D prettier

56. {
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"bracketSpacing": false,
"trailingComma": “none"
}
.prettierrc.json

57. "scripts": {
"start": "parcel index.html",
"test": "jest",
"lint": "eslint src/*.js”,
“lint:fix”: "eslint src/*.js —fix”,
"format": “prettier src/*.js —write"
}
package.json

58. $ npm run format

59. husky

60. Git hooks made easy. To prevent
bad commit, push and more!

61. lint-staged

62. Run linters on git staged files.

63. $ npm install -D husky lint-staged

64. {
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"npm run lint:fix",
"npm run format",
"git add"
]
},
}
package.json

65. $ git add .
$ git commit

66. Toolingrecap

67. Use eslint for flag programming error
Use prettier for consistent formatting
Use husky and lint-staged for enforcing
code quality

68. @rizafahmi
@rizafahmi22