DEV Community

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

Posted on • Edited on

10 1

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

Follow us on Instagram

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
alemantrix profile image
Aryan Agrawal

Helpful!!! 👏👏👏

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more