5 Tips for Creating Cleaner JavaScript Code

JavaScript is a versatile language that allows us to write code without many specific standards/paradigms. This can bring both advantages and disadvantages. While, we can code as we see fit for the project, on the other hand, if there is a lack of organization, this can become a problem. Taking advantage of the good side of JavaScript freedom, explore these 5 quick tips that I like to use on a daily basis, and that can make the code a little cleaner:

1. Simplify Boolean Conditions

In some specific cases like the example below, we want to return a Boolean value according to a condition that is also Boolean, like this:

function isLogged(user) {
 if (user.logged === true) {
    return true
 } else {
    return false
 }
}

The result of the user.logged evaluation will be true or false, this is exactly the return we want, right?! If user.logged is true, we will return true. If it is false, we will return false.

So, we can achieve the same effect by saving lines:

function isLogged(user) {
   return user.logged // This returns true or false based on the evaluation
}

2. Simplify Quantity Conditions

If our condition is dealing with numbers, we can also simplify it.

Imagine that we have a function where we will check if the user’s phone was filled:

function phoneIsValid(user.phone) {
 if (user.phone.length > 0) {
   return true
 } else {
   return false
 } 
}if (phoneIsValid(user)) { ... }

Within a conditional, the value 0 is evaluated as false, and values greater than zero are evaluated as true. This allows us to write the function this way:

function phoneIsValid(user.phone) {
   return user.phone.length
}

As in tip 1, our evaluation is already the return we want!

If we want to keep the return type (Boolean) we must return it like this:

function phoneIsValid(user.phone) {
   return !!user.phone.length
}

Using the negation operator 2 times, we force JavaScript to convert the value to true or false.

3. Receive Parameters Using Destructuring Assignment (ES6)

ES6 (Ecmascript 6, or ES2015) brought us several facilities, one of which is the destructuring assignment.

This functionality allows us to extract data from arrays or objects and it can be used directly when receiving the parameters of a function.

We can rewrite the function above as follows:

function phoneIsValid({ phone }) {
   return !!phone.length
}

4. Use Arrow Functions

Also brought by ES2015, the arrow functions give us the possibility to hide the word return, and the keys:

const phoneIsValid = ({ phone }) => phone.length

The code above continues to do the same thing as in tip 3, now in just 1 line!

5. Use OR for Conditions

Again, on conditionals, there are cases in which we can use the OR to simplify the code.

Imagine that we want to check the username, if it exists we will return it, otherwise we will return a default value:

function getUserName(user) {
 if (user.name) {
   return user.name
 } else {
   return 'Nobody'
 }
}

This function can be rewritten as follows:

function getUserName(user) {
   return user.name || 'Nobody'
}

We return user.name (if any), otherwise the return will be the default string.

Putting together some previous tips, we can arrive at the following result:

const getUserName = ({ name }) => name || 'Nobody'

Note: In 1 line, notice how we simplified our getUserName function, compared to the first implementation!

Conclusion

There are many ways to write the same code, the tips above are ways that I like to implement code in the projects I develop. Liked? Recommend, share, comment!

Plus, give us some insights about the tips or the things you like to do to improve the quality of your code.

About the Author

Diogo Souza works as a Java Developer at PagSeguro and has worked for companies such as Indra Company, Atlantic Institute and Ebix LA. He is also an Android trainer, speaker at events on Java and mobile world.