JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we look at spacing around semicolons, statements, and functions and sorting object keys and variables.

Spacing Before and After Semicolons

We don’t need spacing before the semicolon but we do need spacing after it since we want to keep different statements apart.

For instance, the following code isn’t good since it has no spaces between the statements:

let a = 1;let b = 2;

As we can see, with a space character between the ; and the let keyword, it’s very hard to read the 2 let variable declarations.

On the other hand, if we added a space after the semicolon as follows:

let a = 1; let b = 2;

Then we can see the 2 variable declarations much more clearly.

Therefore, we should always add a space character after the semicolon if we have multiple statements on the same line.

Having a space character after the semicolon and before the next statement is the most common place to put the space character.

Sorting Object Keys

To make finding object keys easier, we may want to sort the keys by alphabetical order in an object.

For instance, we can write the following code to do that:

const obj = {  
  a: 1,  
  b: 2  
}

In the code above, we sorted the keys of obj by alphabetical order. This is more of a suggestion if we want to find object keys. However, it isn’t a big deal if the keys aren’t sorted.

Variable Sorting

Like with object keys, we can also sort variable declarations by alphabetical order so that we can find them easier.

Like with sorting object keys, it’s more of a suggestion than a requirement.

For instance, we can sort variable declarations as follows:

let a, b, c;

Space Before Blocks

We probably want a space before the block so that we can clearly see the function signature and the opening of the block.

For instance, we can write the following code to do that:

const foo = () => {};

In the code above, we have a space character before and after the arrow so that we can clearly see each part of our arrow function.

For traditional functions, we can see the following code:

const foo = function() {}

We have one space character between the parentheses and the opening curly brace. This also makes the code clearer than without any space.

Spaces make things easier to read.

Likewise, we can apply similar spacing to loops as follows:

for (let i = 0; i < 10; i++) {  
  console.log(i);  
}

In the code above, we have a space between the closing parentheses and the opening curly brace.

Again. This lets our eyes tell between different parts of the loop.

For try...catch , we usually have spacing like the following:

try {} catch (ex) {}

Having a little space just makes reading the code much easier.

Space Before Function Parenthesis

We usually don’t have a space character before the opening parenthesis since we have one space character after the closing parenthesis.

For instance, we usually define a JavaScript function as follows:

const foo = function() {};

As we can see, we have no space before between the function keyword and the opening parenthesis and one space character after the closing parenthesis and the opening curly brace.

Named functions have the same spacing. For instance, we write a named function as follows:

function foo() {};

We have one space character after the closing parenthesis and the opening curly brace.

Photo by Guillermo Ferla on Unsplash

Spaces Inside of Parentheses

We usually don’t put spaces between the parentheses and the expressions inside.

For instance, we usually don’t write something like:

const foo = ( 5 + 6 ) * 3;

The code above has an extra space before the 5 and after the 6. Instead, we usually, write expressions like that without those spaces as follows:

const foo = (5 + 6) * 3;

Conclusion

Usually, JavaScript code’s spacing follows some generally accepted conventions. We don’t have spaces between parentheses and expressions.

Between the function signature and the opening curly braces, we usually have space.

After a semicolon and before the next statement, we also usually have a space character to separate the 2 statements that are both in one line.

The post JavaScript Best Practices — Semicolons, Spacing, and Sorting appeared first on The Web Dev.