How to reduce cognitive complexity of a function?

The cognitive complexity of a function increases if:

1. There are multiple nested structures (like “if else” conditions)

2. If there is flow-breaking code (like “for” loops)

The cognitive complexity of JavaScript/TypeScript can be assessed using the SonarLint extension in Visual Studio Code.

In order to reduce the cognitive complexity of a function, the developer has to simplify the code using shorthand for collapsing multiple statements into one.

Ways to reduce the Cognitive Complexity

1. Move repeated Code/nested if else to a separate function
In order to simplify nest if else conditions, we can move the repeated code to a separate function. We can also move the nest conditions to a separate function.

complexFunction(){
if(condition1){
     if(condition2){
     }
     else{
     }
  }
else{

    }
}

//We can move the nest if to a separate function
complexFunction(){
if(condition1){
    this.anotherFunction()
  }
else{

    }
}

anotherFunction(){
 if(condition2){
     }
     else{
     }
}

2. Use Ternary Operator
Use ternary operator instead of if-else loop if you have 2 conditions.

checkCondition(){
if(condition){
      return true 
    }
else{
      return false
    }
}

//Ternary operator for the above if else condition

checkCondition(){
      return condition? true: false
}

3. Avoid if-else loops for always truthy or falsy conditions
This is one of the mistakes a lot of newbie developers make. Please avoid using if else loops for statements that always return a constant boolean value (true or false).

4. Use Array.includes() instead of multiple ‘or’ conditions in if else loops
Convert all the conditions to a array and then use .includes().

//condition with multiple 'or' conditions
if(fruit === 'apple' || fruit === 'mango'){}

//convert to array to use includes
const fruitList = ['apple', 'mango']
if(fruitList.includes(fruit)){}

5. Optional Chaining
We use ?. to avoid error in a property located deep in a chain of objects instead of if check.

const car= {
  manufacturer: 'Ford',
  model: {
    year: 2012,
    color: 'Red'
  }
};

const carName = car.specs.warranty; 
// this will break the code as specs is undefined

const carName = car.specs?.warranty; 
// this will output undefined

6. Setting default value using selector operator
In order to set a default value of a variable, we can use the selector operator ||.

 variable = variable || 'default value'
 // this will return default value if variable is false 
   (null or undefined). 

Follow us on Instagram