We Keep Coding

How to reduce cognitive complexity of nested if

I have an if statement set up like this
if (A && B) {
// do something 1
} else {
if (B) {
// set some boolean to false
}
// do something 2
}
I'm wondering if I can lower the cognitive complexity? Right now this is a score of 4.

I would say the best way to lower the cognitive complexity is to use functions. This is similar to #GuerricP original answer, but handles the multiple case of do somthing 2
eg.
function doSomething2() {}
if (A && B) {
// do something 1
} else if (B) {
// set some boolean to false
doSomething2();
} else {
doSomething2();
}
This reduces complexity, because it's not obvious that there are 2 routes to doSomething2 in your original version.

Well you could have only one level of depth like this:
function originalImplementation(A, B) {
if (A && B) {
console.log("do something 1");
} else {
if (B) {
console.log("set some boolean to false");
}
console.log("do something 2");
}
}
function newImplementation(A, B) {
if (A && B) {
console.log("do something 1");
}
else if (B) {
console.log("set some boolean to false");
}
if (!A || !B) {
console.log("do something 2");
}
}
console.log("originalImplementation");
originalImplementation(0, 0);
originalImplementation(0, 1);
originalImplementation(1, 0);
originalImplementation(1, 1);
console.log("newImplementation");
newImplementation(0, 0);
newImplementation(0, 1);
newImplementation(1, 0);
newImplementation(1, 1);

I think this is the right way to do it and the cleanest.
const DoSomething = function(){}
if (A && B) {
}
else if (B) {
DoSomething();
}
else {
DoSomething();
}

Assuming you do one and only one thing for each case you can try decluttering the syntax:
One-liner if statements don't need the curly braces
You can avoid if, else if, etc. with an early return
const run = (a, b) => {
if (a && b) return fun1();
if (a) return fun2();
if (b) return fun3();
return fun4();
}
In this case I prefer using nested ternaries. Something usually considered as "bad practice" by tool makers and opinion leaders in the industry but I think with the right indentation they offer more decluttering opportunities:
const run = (a, b) =>
( a && b ? fun1()
: a ? fun2()
: b ? fun3()
: fun4());
Of course YMMV ;)

Setting the boolean first can setup a clearer if/else
if(!A && B) {
// set some boolean to false
}
if (A && B) {
// do something 1
} else {
// do something 2
}
Another strategy is to drop out of functions asap
e.g.
if(X) {
// do stuff
return;
}
if(Z)
{
// do different stuff
return;
}
// do default stuff
return;
This allows the reader to dismiss logic beyond the condition they are interested in
Finally you can also create functions with meaningful names rather than comments
if(X) {
return doSomething2();
}

Creating a loop for an else statement inside a function

I am trying to create a loop to include an else statement. It works perfectly with the if statement as below but when trying to put in the else statment it either shows nothing or creates 6 loops. Im assuming I am putting the else statement in the wrong place. Can someone please explain to me a) where to put the else statement and b) the nesting criteria of the ending curly braces inside a function
Heres what ive got and it works perfectly until i place the else statement in. thanks
var sports = ["golf", "cricket", "tennis", "badminton", "squash"];
function checkSport(sportToCheck) {
for (var i = 0; i <= sports.length; i++) {
if (sportToCheck == sports[i]) {
alert("yes we offer that sport");
}
}
}
checkSport("tennis")

Based on your variable names, I guess you don't have to use else in this context but you would like to end the loop/function as soon as the sport is found:
function checkSport(sportToCheck) {
for (var i = 0; i <= sports.length; i++) {
if (sportToCheck == sports[i]) {
alert("yes we offer that sport");
return; // stop the execution of the function
} else {
console.log("Do nothing so you don't need this else statement.");
}
}
alert("No we don't offer that sport"); // If the loop ends and cannot find any match
}

Because your function is check() and to respect Do One Thing rule, it's better to return true or false.
There are many ways to solve your issue but I prefer find().
var sports = ["golf", "cricket", "tennis", "badminton", "squash"];
function checkSport(sportToCheck) {
return sportToCheck === sports.find((sport) => sport === sportToCheck);
}
console.log(checkSport("football")); // Expect : false
console.log(checkSport("tennis")); // Expect : true
If you want to improve #Hangindev answer you can do this:
for (sport of sports) {
true === (sportToCheck === sport) && alert("yes we offer that sport");
}

No need for else statements. Simply run through each possible value in the sports array, and use the return statement to pause further script execution within that function.
The function returns either true or false depending on whether the string is inside the sports array.
var sports = ["golf", "cricket", "tennis", "badminton", "squash"];
function checkSport(sportToCheck) {
for (var i = 0; i <= sports.length; i++) {
if (sportToCheck == sports[i]) {
alert("yes we offer that sport");
return true;
}
if (i == sports.length) {
alert("sorry we do not offer this sport");
return false;
}
}
}
checkSport("tennis")
You could use this for something like:
if (checkSport("tennis")) {
// sport exists
} else {
// sport does not exist
}

Javascript micro optimisation for if statement

I am fairly new to JavaScript and I have a question regarding how to optimise if statements.
I will show you two scenarios.
//first
var number = 10;
var calculationOneResult = functionOne(number);
var calculationTwoResult = functionTwo(number);
if (calculationOneResult === true) {
//stuff
} else if (calculationTwoResult === true) {
//more stuffs
}
//second
var number = 10;
if (functionOne(number) === true) {
//stuff
} else if (functionTwo(number) === true) {
//more stuffs
}
Here is my question:
In the first scenario, I am calculating two times.
In the second one, if the first function returns true, will it calculate the second elseif statement or will it skip it after doing the stuff ?

The following code:
if(statement1) {
// stuff
} else if(statement2) {
// other stuff
}
is equivalent to
if(statement1) {
// stuff
} else {
if(statement2) {
// other stuff
}
}
as there is no elseif in JavaScript - see documentation.
So the answer is any function in statement2 will be simply skipped.

Nothing in an else clause executes if the if expression tests as true, so the second version of your code will definitely save a function call in such cases.

Will this code ever return false?

I'm reviewing some code where the logic looks flawed. I'm not sure if the following code will ever return false because of the if else return flow. My question is, will the following code ever return false, or even throw an error?
function performSearch(e) {
if(e.keyCode === RETURN_KEY_KEYCODE) {
var select = document.getElementById("selectmenusearch");
var selected = select.options[select.selectedIndex].value;
if(selected === 'organisation') {
submitSearchForm('<%= doOrganisationSearchURL %>');
} else {
submitSearchForm('<%= doIndividualSearchURL %>');
}
} else {
return false;
}
return true;
}
So the flow to me looks like
if (this condition is true) {
//execute some code
} else {
return false
}
else return true
NB: I know it would be better to refactor to have only one return statement but it looks to me like there are two else statements.

It depend of e.keyCode but if e.keyCode is not always equal to RETURN_KEY_CODE it will not always return false. You have 2 return. The first one is in the else of the first if so if e.keyCode !== RETURN_KEY_CODE, false is return. Else, you if will end normally and the instruction after it is return true.
function performSearch(e) {
if(e.keyCode === RETURN_KEY_KEYCODE) {
...
} else {
return false; // RETURN_KEY_KEYCODE !== e.keyCode
}
return true; // RETURN_KEY_KEYCODE === e.keyCode
}
I don't see any wait it can alway return false if e.keyCode is not always the same value. :)
If you want to make it more clear, you can just put the return in the end of the first if. Like that:
function performSearch(e) {
if(e.keyCode === RETURN_KEY_KEYCODE) {
...
return true; // RETURN_KEY_KEYCODE === e.keyCode
} else {
return false; // RETURN_KEY_KEYCODE !== e.keyCode
}
}

Just run a test. Seems like you were confused with what happens when there is more than one "return" statement in a function.
A return statement is a regular statement, just like any other - except for the fact that it will interrupt the local block execution and return flow control to the code that called the function. It is indifferent for you the fact that you have one, two, three returns... the language interpreter strictly follows the IF/ELSE rules - if a condition is met, then the block (delimited with "{ }" defined immediately under the if is the one that is executed, if the condition is not met, then the respective if's else block is executed. Whatever is the case, both if and else blocks, upon reaching their ends, will return flow to the next statement right after the if block (the if block is comprised by the if + else blocks), in the example here, "return true".
(function() {
if (k) {
console('k renders true');
}
else {
console.log('else reached');
return false;
}
return true;
console.log('bottom return true reached');
})();

Javascript multiple if true conditions

I neeed help with multiple if conditions.
if condition 1 & condition 2 true means I want both condition actions:
if(condition 1 true) {
$('.inner_wrapper').addClass('em-border-red');
return false;
}
if(condition 2 true) {
$('.cCal').addClass('em-border-red');
return false;
}
if(condition 3 true){
$('.cCal-row2').addClass('em-border-red');
return false;
}
But only one condition works.

Each of your if blocks contains a return statement. As soon as one condition is met, no further code will execute. This is, by definition, the behaviour of the return statement:
A return statement causes a function to cease execution and return a value to the caller
Since all of yours just return false, you should be able to move the return to after the conditions:
if(condition1) {
$('.inner_wrapper').addClass('em-border-red');
}
if(condition2) {
$('.cCal').addClass('em-border-red');
}
if(condition3) {
$('.cCal-row2').addClass('em-border-red');
}
return false;

Remove the return false; form each if block and try to manage it at the bottom, outside of if condition.

retVal = true;
if(condition 1 true)
{
$('.inner_wrapper').addClass('em-border-red');
retVal = false;
}
if(condition 2 true)
{
$('.cCal').addClass('em-border-red');
retVal = false;
}
if(condition 3 true)
{
$('.cCal-row2').addClass('em-border-red');
retVal = false;
}
return retVal;

You have two ways:
<!-- and condition //-->
if (a == b && a != c) {
// your stuff
<!-- or condition //-->
} else if (a == c || a ==b) {
// other stuff
<!-- otherwise //-->
} else {
// another stuff
}
Otherwise you have "switch case". Like on this page.