JavaScript Best Practices — Basic Syntax

Like any kind of app, 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.

Indentation

We should have 2 spaces for indentation. This minimizes typing while maintaining visibility.

For instance, we write:

function hello (name) {
  console.log('hi')
}

Single Quotes for Strings

Single quotes are good for delimiting strings since we don’t have to press the shift key as we do with typing double-quotes.

For instance, we can write:

'hello world'

to save us some effort when typing.

No Unused Variables

Variables we don’t use are useless, so we shouldn’t have them.

Add a Space After Keywords

A space after keywords is always useful since it makes reading our code easier.

So we should add them:

if (condition) { ... }

Having no spaces make things hard to read.

Add a Space Before a Function Declaration’s Parentheses

We should add a space before a function declaration’s parentheses for better readability,

For example, we should write:

function foo (arg) { ... }

Always Use === Instead of ==

=== doesn’t to automatic data type conversions with complex rules before comparing its operands.

Therefore, this makes === much more preferable than == .

It’ll help us avoid lots of bugs by using it.

So we write:

if (name === 'james')

instead of:

if (name == 'james')

Likewise, we should use !== instead of != for inequality comparison for the same reason.

For example, we write:

if (name !== 'John')

instead of:

if (name != 'John')

However, we can use == to check for null and undefined in one expression.

For instance, we can write:

if (foo == null)

to do that.

Infix Operators Must be Spaced

We should space out any infix operators like = or arithmetic operators.

For instance,e we shouldn’;r write:

let x=2;

Instead, we write:

let x = 2;

Likewise, we should write:

let message = 'hello, ' + name + '.'

instead of:

let message = 'hello, '+name+'.'

This way, we can read the code a lot easier, especially if we have lots of operators in our expression.

Commas Should Have a Space Character

We should have a space character after a comma.

For example, we should write:

const list = [1, 2, 3]

or:

const greet = (name, options) => { ... }

instead of:

const list = [1,2,3]

or:

const greet = (name,options) => { ... }

Keep else Statements on the Same Line as their Curly Braces

We should keep else in the same line as their curly braces.

For example, we should write:

if (condition) {
  // ...
} else {
  // ...
}

instead of:

if (condition) {
  // ...
}
else {
  // ...
}

It saves some space while maintaining readability.

Use Curly Braces for Multiline Statements

We should use curly braces for if statements so we don’t get confused about them.

For instance, we can write:

if (options.foo) console.log('done')

or:

if (options.foo) {
  console.log('done')
}

However, we shouldn’t write:

if (options.foo)
  console.log('done')

since it’s deceptive where the if block starts or ends.

Always Handle err Function Parameter

If a callback has an err parameter, then we should handle it if it’s defined.

For example. we write:

run(function (err) {
  if (err) throw err
  console.log('done')
})

If err is defined then we throw it.

What we shouldn’t do if ignore it and pretend that nothing happened.

Declare Browser Globals with a global Comment

To make sure that we aren’t defining undeclared global variables, we should add a comment or reference the global object to access the global variable.

For example, we write:

/* global alert */

alert('hi')

We can also write:

window.alert('hi');

window is the global object in the browser, so we should write that out explicitly.

No Multiple Blank Lines

It’s useless to have multiple blank lines, so we should just keep one maximum and remove the rest.

We write:

const value = 'hello world';
console.log(value);

instead of:

const value = 'hello world';

console.log(value);

Conclusion

We should indicate global variables if we’re using them.

Also, we should use === or !== for comparisons in most cases.

Indentation and spaces make reading code easier.