Friday, July 14, 2017

JavaScript Best Practices Checklist / Important Things

Learning new things every day is a great habit that makes people great and ideal human being. As a developer, it is a part of our job. Developers are always accustomed to learn new things regularly. Sometimes, it becomes part of our daily work and sometimes it happens for more curious minds who advance always themselves with new technology and best practices.

Best practices is a significant coding style for every professional software developer. Your code is not enough good when machine can only read it and other developers can not. Your code should be human readable too. That's why ideal developers follow best practices for their coding style. It makes their code more sophisticated, readable, elegant, and comprehensive for every other developer.

In this article, I will point out a few important JavaScript best practices that you can remember easily.

1. Avoid polluting global scope. Always use IIFE (Immediately-Invoked Function Expression)
(function () {
   var foo = 12;
   console.log(foo);
   // 12
})();
 
 More Examples:
 
const getName = function () { }()     // ✗ avoid 
 
const getName = (function () { }())   // ✓ ok 
const getName = (function () { })()   // ✓ ok 

2. Use "use strict" to protect version compatibility and unexpected error. Best to use inside IIFE
(function () {
   "use strict";
   var foo = 40;
   console.log(foo);
   // 40
})();
 
3. Follow strict equal for comparison
"40" === 40;
// false 
 
4. Use && and || and Ternary operator to make code shorter
expr && doSomething();

// Instead of:
if (expr) {
   doSomething();
}

 .............................................
function doSomething () {
   return { foo: "bar" };
}
var expr = true;
var res = expr && doSomething();
res && console.log(res);
// → { foo: "bar" }
 
5. No ternary operator when simpler alternatives are available
let score = val ? val : 0     // ✗ avoid 
let score = val || 0          // ✓ ok 

6. Maintain consistency of newlines between objects properties
 const user = {
  name: 'Jane Doe', age: 30,
  username: 'jdoe86'            // ✗ avoid 
}
 
const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' }    // ✓ ok 
 
const user = {
  name: 'Jane Doe',
  age: 30,
  username: 'jdoe86'
}

7. Semicolons must have a space after and no space before.
for (let i = 0 ;i < items.length ;i++) {...}    // ✗ avoid 
for (let i = 0; i < items.length; i++) {...}    // ✓ ok
 
8. Must have a space before block.
if (admin){...}     // ✗ avoid 
if (admin) {...}    // ✓ ok 

9. No spaces inside parenthesis
getName( name )     // ✗ avoid 
getName(name)       // ✓ ok
 
10. Use isNaN() when checking for NaN.
if (price === NaN) { }      // ✗ avoid 
if (isNaN(price)) { }       // ✓ ok
 
11. Avoid Yoda condition
if (42 === age) { }    // ✗ avoid 
if (age === 42) { }    // ✓ ok

12. Never start a line with (,[, or ` .
// ✓ ok 
;(function () {
  window.alert('ok')
}())
 
// ✗ avoid 
(function () {
  window.alert('ok')
}())

13. Clever short-hand is discouraged, in favor of clear and readable expression, avoid this type of expression.
;[1, 2, 3].forEach(bar)

and try to write the code following way.
var nums = [1, 2, 3]
nums.forEach(bar)


I have mentioned a very few lists of most usage scenarios in our regular programming paradigm. But, You need more, I know. So, I will suggest you to read and follow few style-guides available.

1. Google Javascript Style-guide Click Here
2. Standard JavaScript rules Click here
3. Airbnb Style-guide Click here

To use your preferred coding style and follow the rules strictly, you can use some Code quality tools available.

1.Jslint Go here
2.Jshint Go here
3.Tslint if you write in Typescript Go here

Conclusion:
When you use any JavaScript framework or library for your application, try to follow that framework or library specific guides if available.Use modern scaffolding, build tools, task runners, and  minifications. For instance, Webpack, Gulp, Grunt, Bower, Yeoman, Uglify, minify. I would like to here anything else you follow for best practices in JavaScript.

No comments:

Post a Comment