The cognitive complexity of a function increases if:
There are multiple nested structures (like “if else” conditions)
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
Top comments (1)
Helpful!!! 👏👏👏