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.
Place the ? : in Ternary Operators on their Own Lines if the Expressions are Long
We should place ? and : on their own line if they expressions are long.
For instance, we can write:
const apiUrl = env.development
? 'localhost'
: 'http://www.api.com'
or:
const apiUrl = env.development ? 'localhost' : 'http://www.api.com'
Write Each var Declaration in their Own Statement
To make the declaartions clear, we should put them onto their own line.
For example, we write:
var foo = true
var bar = true
instead of:
var foo = true, bar = true;
or:
var foo = true,
bar = true;
Now we know that foo and bar are both declared with var .
Wrap Conditional Assignments with Additional Parentheses
We should wrap conditional assignments with additional parentheses to make readers clear of our intentions.
For example, we write:
while ((m = text.next(expr))) {
// ...
}
instead of writing:
while (m = text.next(expr)) {
// ...
}
This way, readers will know that the assignment is intentional.
Add Spaces Inside Single Line Blocks
We should add spaces inside single-line blocks for better readability.
For example, instead of writing:
function foo () {return true}
We write:
function foo () { return true }
Use camelCase When Naming Variables and Functions
Using camelCase for variables and functions is commonly accepted convention, so we should use it in our code for consistency.
For example, we should write:
let myVar = 'hello';
or:
function myFunction () { }
Trailing Commas
Trailing commas may be removed to maintain compatibility between browsers.
For example, we can write:
const obj = {
msg: 'hello'
}
which is more compatible than:
const obj = {
msg: 'hello',
}
Commas Must be Placed at the End of the Current Line
We should place commas at the end of the current line.
It’s much less confusing if we do that.
For example, we shouldn’t write:
const obj = {
foo: 'foo'
,bar: 'bar'
}
Instead, we write:
const obj = {
foo: 'foo',
bar: 'bar'
}
The Dot Should be on the Same Line as the Property
The dot should be placed on the same line as the property to indicate that we’re accessing it.
For instance, we write:
console
.log('hello')
instead of writing:
console.
log('hello')
Files Should End with a New Line
We should add a new line to the end of each file so that they can be concatenated properly.
Likewise, they can be appended to properly if we have an empty line at the end of the file.
Outputting the file to the terminal with a new line also won’t interfere with the shell prompt.
Therefore, we should have a new line at the end of each file.
No Space Between Function Identifiers and Their Invocations
There should be no space between function identifiers and their invocation.
For example, we write:
console.log('hi')
instead of:
console.log ('hi')
Add a Space Between Colon and Value in Key-Value Pairs
We should add a space between the colon and value in key-value pairs for readability.
For example, we write:
const obj = { 'key': 'value' }
Constructor Names Must Begin with a Capital Letter
According to commonly accepted JavaScript conventions, constructor names must begin with a capital letter.
Therefore, we should have that in our code.
For instance, we write:
function Animal () {}
const cat = new Animal();
Constructor with no Arguments Must be Invoked with Parentheses
We should invoke a constructor with no arguments with parentheses.
Although we’re allowed to invoke constructors with no arguments without parentheses in JavaScript, we shouldn’t do it.
This causes confusion.
So we should write:L
const dog = new Animal()
instead of:
const dog = new Animal
Conclusion
We should add spacing in our code for better readability.
However, we should add them where they’re appropriate.
Also, we should follow common conventions.
