DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to reduce cognitive complexity of a function?
Hardique Dasore
Hardique Dasore

Posted on • Updated on

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{
     }
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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)){}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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). 
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (1)

Collapse
 
alemantrix profile image
Aryan Agrawal

Helpful!!! πŸ‘πŸ‘πŸ‘

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.