Like any kind of apps, JavaScript apps also have to be written well.
Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some best practices we should follow when writing JavaScript code.
No Whitespace Between Spread Operators and their Expressions
We shouldn’t have any whitespace between spread operators and their expressions.
For instance, instead of writing:
fn(... args)
We write:
fn(...args)
Semicolons Must Have a Space Character After and no Space Before
Semicolons should have a space character after it and no space before as commonly accepted in JavaScript.
For instance, instead of writing:
for (let i = 0 ;i < arr.length ;i++) {...}
We write:
for (let i = 0; i < arr.length; i++) {...}
Have a Space Character Between Blocks
If we’re creating a block, then we should have a space character before it.
For instance, instead of writing:
if (cond){...}
We write:
if (cond) {...}
No Space Inside Parentheses
We shouldn’t have spaces inside parentheses.
For instance, instead of writing:
getName( person )
We write:
getName(person)
Unary Operators Must have Space After it
We should have a space character after unary operators so we can read them.
Also, we don’t want to join words together.
For instance, instead of writing:
typeof!cond
We write:
typeof !cond
Use Spaces Inside Comments
We should have spaces inside JavaScript comments.
For instance, instead of writing:
//comment
We write:
// comment
For multiline comments, we shouldn’t write:
/*comment*/
Instead, we write:
/* comment */
No Spacing in Template Strings
We shouldn’t have spaces at the beginning or the end of expression in template strings.
For instance, instead of writing:
const message = `hi, ${ name }`
We write:
const message = `hi, ${name}`
To Check for NaN, we Should Use isNaN
We can’t use the === to compare NaN since NaN isn’t considered to be the same as itself.
Instead, we need to use the isNaN function to check for NaN .
So instead of writing;
if (price === NaN) { }
We write:
if (isNaN(price)) { }
typeof Must be Compared to a String
The typeof must be compared to a valid string.
Make sure that we don’t have typos in the string.
For instance, we shouldn’t write:
typeof name === 'undefimed'
when we actually mean:
typeof name === 'undefined'
Immediately Invoked Function Expressions (IIFEs) Must be Wrapped
We should wrap IIFEs with parentheses so we make it clear that we’re calling the function immediately after it’s defined.
For instance, we should write:
const getName = (function () { }())
or:
const getName = (function () { })()
or:
const getName = (() => { })()
yield Expressions Must Have a Space Before and After
When we’re calling a generator function from another generator function, we need the yield * keyword.
We should write it like that for consistency with JavaScript conventions.
For instance, we write:
yield * foo();
No Yoda Expressions
We should have the value we’re comparing as the right operator so that we can them easier.
It’s more like regular human speech
For instance, we write:
if (age === 2) { }
instead of:
if (2 === age) { }
Semicolons
We should have semicolons to avoid automatic semicolon insertion in unexpected places.
For instance, we write:
window.alert('hi');
Never Start a New Line with Characters that we Don’t Expect to Start a Line With
We shouldn’t have characters like parentheses, brackets, semicolons, commas, etc. to start a line with even though they’re valid.
For instance, we shouldn’t write code like:
;(function () {
window.alert('ok')
}())
Instead, we write:
(function () {
window.alert('ok')
}())
Conclusion
We shouldn’t write code that most people don’t expect.
Also, we should write code that reads naturally as programmers.
We also shouldn’t have useless whitespace in our code.
