6 Ways to Shorten and Write a Cleaner JavaScript

Coding is very vast and there are many different ways to implement the same business logic in the code. In addition to this different languages provide different syntaxes/operators to perform a task.

Today, we will see 6 ways in JavaScript that can save your lines of code and also enhance the understandability of the code. And will also see the difference of how code looks after their implementation.

1. The Ternary Operator

This is the most commonly used replacement of the if-else statement. In addition to JavaScript, it is available in other languages.

A ternary operator is defined in the following syntax:

<condition> ? <what to do if true> : <what to do if false>

Code example without ternary operator:

if(a>b){
   console.log('A is greater')
} else {
   console.log('B is greater')
}

Code example with ternary operator

a>b ? console.log('A is greater') : console.log('B is greater')

Working example on google chrome console

10>5 ? console.log('10 is greater') : console.log('5 is greater') 
// prints 10 is greater
10>15 ? console.log('10 is greater') : console.log('15 is greater') // prints 15 is greater

2. Short Circuiting

This technique can be used if you want to use a simple if condition. It can be used using an && operator.

Code example using if condition

if(a===b){
  executeFunction()
}

Code example using short circuiting

a===b && executeFunction()

if the condition (a===b) evaluates to false then the statement after && (here executeFunction) will not be executed. This way we can achieve the same flow as of if condition.

This can be chained to replace multiple if statements

a===b && x===y && executeFunction()
(a===b || x===y) && executeFunction()

Working Example on google chrome console

10===10 && 1===1 && console.log('ok')  // prints ok
10===10 && 1===2 && console.log('ok')  // prints false
(10===10 || 1===2) && console.log('ok') // prints ok

3. Optional Chaining Operator

Optional chaining operator is used in case of Objects. It can check for existence of the object properties and returns false if the property doesn’t exist on the object.

Consider the following object

const obj = {
  name:{
      firstName: 'Neelesh',
      lastName: 'Arora'
  }
}

Code example without optional chaining operator

if(obj.name){
   if(obj.name.firstName){
      console.log(obj.name.firstName)
   }
}
if(obj.name && obj.name.firstName){
    console.log(obj.name.firstName)
}

Code example with optional chaining operator

console.log(obj.name?.firstName)

4. Nullish Coalescing Operator

Ternary operator already shortens the code as compared to the if-else. This operator (??) can make the code even shorter.

Code example without nullish coalescing operator

return obj?.name ? obj.name : 'Name doesn't exist'

Code example with nullish coalescing operator

return obj?.name ?? 'Name doesn't exist'

This code returns obj.name itself if it exists else returns the message — ‘Name doesn’t exist’ if obj.name does not exist.

5. Using common return instead of returning in an if-else block

This is so simple. Just changing a few lines of code will provide us with a cleaner and better code.

Code without changes

function a(arg){
   if(arg===0) {
      return 'Argument is zero'
   } else if(arg>0) {
       return 'Argument is a positive number
   } else {
      return 'Argument is a negative number'
   }
}

Code with changes

function a(arg){
   if(arg===0){
      return 'Argument is zero'
   }else if(arg>0){
       return 'Argument is a positive number
   }
   return 'Argument is a negative number'   
}

6. Avoiding return new Promise() and using Promise class methods directly

Larger Code

function isPositiveNumber(num){
   return new Promise((resolve,reject)=>{
      if(num > 0){
         resolve(true)
      }
      reject(false)
   })
}

Shortened Code

function isPositiveNumber(num){
   num > 0 ? Promise.resolve(true) : Promise.reject(false)
}