PC code digital design

5 Javascript tips for cleaner code

Javascript is a versatile language that allows us to write code without many specific standards / paradigms. This can bring us both advantages and disadvantages.

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, I listed 5 quick tips that I like to use on a daily basis, and that can make the code a little cleaner:

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 evaluation returns true or false  }

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 like this:

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.

Receive parameters using destructuring (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 can be used directly when receiving parameters of a function.

We can rewrite the function above this way:

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

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!

Use OR for conditions

Again on conditionals, there are cases where 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 'Anonymous'   }  }

This function can be rewritten as follows:

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

We return user.name (if any), otherwise the return will be the default string. Putting together some previous tips, we can reach the following result:

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

1 line! Notice how we simplified our getUserName function, compared to the first implementation!


There are many ways to write the same code, the tips above are ways that I like to implement in the projects I develop.