What is the best approach for handling nested conditional statements?

Question

What is the best approach for handling nested conditional statements?

I have a complex set of nested conditional checks that I am working on refining to avoid getting stuck in a nested if{}else{} loop. To provide context, I am dealing with two objects, CACHE_FILE_AGE_LIMIT and CACHE_FILE_CURRENT_AGE, and I am trying to navigate through a nested age comparison structure:

first check the days,
    then check hours,
       then check minutes,
           then check seconds

The objective is to progressively move from one time unit to the next, such as days to hours, and stop once a greater value is encountered. For instance, if the day values are equal, we move on to comparing hours, and if an hour value surpasses the limit, we terminate the evaluation.

For a clearer understanding, please refer to the provided example.

const CACHE_FILE_AGE_LIMIT = {
  days: 3,
  hours: 6,
  minutes: 15,
  seconds: 57
}

const CACHE_FILE_CURRENT_AGE = {
  days: 3,
  hours: 5,
  minutes: 14,
  seconds: 57
}

// Function to calculate time difference
function timeDiff(ageObj1, ageObj2) {
  // Inserted logic for comparison...
}

// Additional code for populating and evaluating limits
// Please refer to the actual example for more details

As illustrated, the evaluation process ceases once it is determined that the age can be discerned based purely on the hours.

Feel free to modify the values in CACHE_FILE_CURRENT_AGE to experiment with different scenarios.

--- UPDATE ---

Appreciation to all those who offered solutions. I will need to select one answer to mark the question as resolved.

Check out the demo of the solution here:

https://i.sstatic.net/HkNuS.gif

javascript if-statement

Answer 1

Answer №1

To optimize the handling of properties in a time-like object, consider using a UNITS array with the text representation of each property. Then, iterate over this array with a while loop to sequentially update each DOM element.

const CACHE_FILE_AGE_LIMIT = {
  days: 3,
  hours: 6,
  minutes: 15,
  seconds: 57
}, CACHE_FILE_CURRENT_AGE = {
  days: 3,
  hours: 5,
  minutes: 17, 
  seconds: 57
  
}, UNITS = ["days", "hours","minutes","seconds"]

function timeDiff(ageObj1, ageObj2) {
  let unitsIndex = 0;
  
  while(unitsIndex <= UNITS.length){
    currentEl = document.getElementById(`current_${UNITS[unitsIndex]}`),
    limitEl = document.getElementById(`limit_${UNITS[unitsIndex]}`);

    console.log(UNITS[unitsIndex],ageObj1[UNITS[unitsIndex]],ageObj2[UNITS[unitsIndex]]) 
    currentEl.innerHTML = ageObj2[UNITS[unitsIndex]];
    limitEl.innerHTML = ageObj1[UNITS[unitsIndex]];
    
    if (ageObj1[UNITS[unitsIndex]] < ageObj2[UNITS[unitsIndex]]) {
       console.info(`The current ${UNITS[unitsIndex]} is stale.`)
      currentEl.classList.add("red");  
      return false;
    } else if(ageObj1[UNITS[unitsIndex]] > ageObj2[UNITS[unitsIndex]]){
       console.info(`The current ${UNITS[unitsIndex]} is more than a full unit to the good.`)
      return true;
    }
         
    unitsIndex++;
  }
  return true;
}

var limit_fields = document.querySelectorAll(".limit");
for(i=0; i < limit_fields.length; i++){
        let id = limit_fields[i].id.split("_")[1];
        let val = CACHE_FILE_AGE_LIMIT[id]
        limit_fields[i].innerHTML = val;
    }

document.getElementById("output").innerHTML = timeDiff(CACHE_FILE_AGE_LIMIT, CACHE_FILE_CURRENT_AGE) ? "up to date" : "old";

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 12px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}
// CSS styling continues...

<table class="tg" style="undefined;table-layout: fixed; width: 265px">
  <colgroup>
    // table columns
  </colgroup>
  <tr>
    <th class="empty"></th>
    <th class="header">CURRENT</th>
    <th class="header">LIMITS</th>
  </tr>
  // table rows and cells
</table>

Template literals can simplify the element IDs by dynamically generating them using the UNITS array. This approach minimizes hardcoded values and simplifies the logic flow. The updated code handles multiple scenarios within the if statement, enhancing clarity and efficiency.

`current_${UNITS[unitIndex] }`

If the current surpasses the limit, return false immediately. If the limit exceeds the current by a full unit, return true. If they are equal, move to the next unit. The code has been adjusted to reflect these cases.

Answer 2

To optimize the handling of properties in a time-like object, consider using a UNITS array with the text representation of each property. Then, iterate over this array with a while loop to sequentially update each DOM element.

const CACHE_FILE_AGE_LIMIT = {
  days: 3,
  hours: 6,
  minutes: 15,
  seconds: 57
}, CACHE_FILE_CURRENT_AGE = {
  days: 3,
  hours: 5,
  minutes: 17, 
  seconds: 57
  
}, UNITS = ["days", "hours","minutes","seconds"]

function timeDiff(ageObj1, ageObj2) {
  let unitsIndex = 0;
  
  while(unitsIndex <= UNITS.length){
    currentEl = document.getElementById(`current_${UNITS[unitsIndex]}`),
    limitEl = document.getElementById(`limit_${UNITS[unitsIndex]}`);

    console.log(UNITS[unitsIndex],ageObj1[UNITS[unitsIndex]],ageObj2[UNITS[unitsIndex]]) 
    currentEl.innerHTML = ageObj2[UNITS[unitsIndex]];
    limitEl.innerHTML = ageObj1[UNITS[unitsIndex]];
    
    if (ageObj1[UNITS[unitsIndex]] < ageObj2[UNITS[unitsIndex]]) {
       console.info(`The current ${UNITS[unitsIndex]} is stale.`)
      currentEl.classList.add("red");  
      return false;
    } else if(ageObj1[UNITS[unitsIndex]] > ageObj2[UNITS[unitsIndex]]){
       console.info(`The current ${UNITS[unitsIndex]} is more than a full unit to the good.`)
      return true;
    }
         
    unitsIndex++;
  }
  return true;
}

var limit_fields = document.querySelectorAll(".limit");
for(i=0; i < limit_fields.length; i++){
        let id = limit_fields[i].id.split("_")[1];
        let val = CACHE_FILE_AGE_LIMIT[id]
        limit_fields[i].innerHTML = val;
    }

document.getElementById("output").innerHTML = timeDiff(CACHE_FILE_AGE_LIMIT, CACHE_FILE_CURRENT_AGE) ? "up to date" : "old";

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 12px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}
// CSS styling continues...

<table class="tg" style="undefined;table-layout: fixed; width: 265px">
  <colgroup>
    // table columns
  </colgroup>
  <tr>
    <th class="empty"></th>
    <th class="header">CURRENT</th>
    <th class="header">LIMITS</th>
  </tr>
  // table rows and cells
</table>

Template literals can simplify the element IDs by dynamically generating them using the UNITS array. This approach minimizes hardcoded values and simplifies the logic flow. The updated code handles multiple scenarios within the if statement, enhancing clarity and efficiency.

`current_${UNITS[unitIndex] }`

If the current surpasses the limit, return false immediately. If the limit exceeds the current by a full unit, return true. If they are equal, move to the next unit. The code has been adjusted to reflect these cases.

Answer 3

Answer №2

To simplify nested conditions into a linear code representation, one can extract individual conditions into functions and utilize the some method for quick run exit. However, storing a flag is necessary when a return value is needed, as the return value of some alone is insufficient.

This method allows for the addition of numerous conditions, easy breakage as needed, and returns a boolean value for further processing.

Nonetheless, a drawback lies in the requirement for understanding data, the nested structure, and the realization that the next condition or function is repeatedly called until a true is returned, disregarding the flag value.

const CACHE_FILE_AGE_LIMIT = {
  days: 3,
  hours: 6,
  minutes: 15,
  seconds: 57
}

const CACHE_FILE_CURRENT_AGE = {
  days: 3,
  hours: 5,
  minutes: 14,
  seconds: 57
}

function timeDiff(ageObj1, ageObj2) {
    var flag;
    [
        () => {
            document.getElementById("current_days").innerHTML = ageObj2.days;
            if (ageObj1.days < ageObj2.days) {
                document.getElementById("current_days").classList.add("red");
                return flag = true;
            }
        },
        // other conditions...
    ].some(fn => fn());
    return flag;
}


// Populate Limits
var limit_fields = document.querySelectorAll(".limit");
for(i=0; i < limit_fields.length; i++){
//console.log('--->', i)
        let id = limit_fields[i].id.split("_")[1];
        let val = CACHE_FILE_AGE_LIMIT[id]
        //console.log('\tid:', id, 'val:', val);
        limit_fields[i].innerHTML = val;
    }

// Evaluate Age
document.getElementById("output").innerHTML = timeDiff(CACHE_FILE_AGE_LIMIT, CACHE_FILE_CURRENT_AGE) ? "old" : "up to date";

.tg {
  border-collapse: collapse;
  // CSS styles...
}

<table class="tg" style="undefined;table-layout: fixed; width: 265px">
  <colgroup>
    <col style="width: 92px">
    <col style="width: 92px">
    <col style="width: 92px">
  </colgroup>
  <tr>
    <th class="empty"></th>
    <th class="header">CURRENT</th>
    <th class="header">LIMITS</th>
  </tr>
  <tr>
    // table rows...
  </tr>
</table>

An alternate approach involves using an array with keys and iteratively processing until a certain condition returns true.

function timeDiff(ageObj1, ageObj2) {
    var flag;

    ['days', 'hours', 'minutes', 'seconds'].some((key, index, keys) => {
        var nextKey = keys[index + 1],
            element = document.getElementById("current_" + key),
            nextElement = document.getElementById("current_" + nextKey);

        element.innerHTML = ageObj2[key];
        if (ageObj1[key] < ageObj2[key]) {
            element.classList.add("red");
            return flag = true;
        }
        if (ageObj1[key] == ageObj2[key] && nextKey) {
            nextElement.innerHTML = ageObj2[nextKey];
        } else {
            element.classList.add("blue");
            flag = false;
            return true;
        }
    });

    return flag;
}

Answer 4

To simplify nested conditions into a linear code representation, one can extract individual conditions into functions and utilize the some method for quick run exit. However, storing a flag is necessary when a return value is needed, as the return value of some alone is insufficient.

This method allows for the addition of numerous conditions, easy breakage as needed, and returns a boolean value for further processing.

Nonetheless, a drawback lies in the requirement for understanding data, the nested structure, and the realization that the next condition or function is repeatedly called until a true is returned, disregarding the flag value.

const CACHE_FILE_AGE_LIMIT = {
  days: 3,
  hours: 6,
  minutes: 15,
  seconds: 57
}

const CACHE_FILE_CURRENT_AGE = {
  days: 3,
  hours: 5,
  minutes: 14,
  seconds: 57
}

function timeDiff(ageObj1, ageObj2) {
    var flag;
    [
        () => {
            document.getElementById("current_days").innerHTML = ageObj2.days;
            if (ageObj1.days < ageObj2.days) {
                document.getElementById("current_days").classList.add("red");
                return flag = true;
            }
        },
        // other conditions...
    ].some(fn => fn());
    return flag;
}


// Populate Limits
var limit_fields = document.querySelectorAll(".limit");
for(i=0; i < limit_fields.length; i++){
//console.log('--->', i)
        let id = limit_fields[i].id.split("_")[1];
        let val = CACHE_FILE_AGE_LIMIT[id]
        //console.log('\tid:', id, 'val:', val);
        limit_fields[i].innerHTML = val;
    }

// Evaluate Age
document.getElementById("output").innerHTML = timeDiff(CACHE_FILE_AGE_LIMIT, CACHE_FILE_CURRENT_AGE) ? "old" : "up to date";

.tg {
  border-collapse: collapse;
  // CSS styles...
}

<table class="tg" style="undefined;table-layout: fixed; width: 265px">
  <colgroup>
    <col style="width: 92px">
    <col style="width: 92px">
    <col style="width: 92px">
  </colgroup>
  <tr>
    <th class="empty"></th>
    <th class="header">CURRENT</th>
    <th class="header">LIMITS</th>
  </tr>
  <tr>
    // table rows...
  </tr>
</table>

An alternate approach involves using an array with keys and iteratively processing until a certain condition returns true.

function timeDiff(ageObj1, ageObj2) {
    var flag;

    ['days', 'hours', 'minutes', 'seconds'].some((key, index, keys) => {
        var nextKey = keys[index + 1],
            element = document.getElementById("current_" + key),
            nextElement = document.getElementById("current_" + nextKey);

        element.innerHTML = ageObj2[key];
        if (ageObj1[key] < ageObj2[key]) {
            element.classList.add("red");
            return flag = true;
        }
        if (ageObj1[key] == ageObj2[key] && nextKey) {
            nextElement.innerHTML = ageObj2[nextKey];
        } else {
            element.classList.add("blue");
            flag = false;
            return true;
        }
    });

    return flag;
}

What is the best approach for handling nested conditional statements?

Answer №1

Answer №2

Similar questions

I need help getting my Vue.JS project to function properly when it is deployed on a server

JavaScript - Attempting to insert a value into a text field by clicking a button

What steps should I take to resolve the "Module Not Found" issue that occurs when I use the command "npm start" after setting up a new React project with npm?

JavaScript can be used to open several tabs simultaneously within a single browser window

The existing session persists when a new user logs in, instead of being destroyed

Attempting to include a standard VAT rate of 5% on the invoice

The ajax method is encountering an issue when trying to perform an action: It is unable to find the necessary anti-forgery form field "__RequestVerificationToken" required for the operation

Using ant-design with react-draggable for modals: A step-by-step guide

Extract information from a URL using Regular Expressions

What could be causing the shake effect on the MUI dialog to not work when clicking away?

The passport authentication process is malfunctioning as there seems to be an issue with the _verify function

Issues with implementing KoGrid within the Durandal JS framework

What is the best way to switch from rows to cards in Bootstrap version 5.3?

I need assistance improving my poor JavaScript patterns and practices. Where should I turn for help?

Ways to transfer information from a function within one element to another element

Development and staging setups tailored specifically for a JavaScript SDK

Using Vue Js to bind two values to an href attribute in a tag

The issues of cross-origin domains arise when utilizing iframes with src links originating from the server side

Bookmarklet does not successfully inject jQuery on a specific webpage

Transform the size and convert an object from a picture into text based on the user's scrolling