use function instead of multiple if else-CodePudding

this is my code and I want to break it to multiple function(clean code!), for these two section (status===edited) and (status === added) or two different function for (dataindex===ReportEffectiveDate) and (dataindex=== EffectiveDate).how can I put these if else statement in a separate function then I use this function for each status. totally I want to know which way is better : I use multiple if and else if or use multiple function for this code? thanks for your help!

function handleTableRowChange(record: LoadModel, oldValue: any, newValue: any, dataIndex: string) {
  console.log(record, oldValue, newValue, dataIndex);
  const status: RowStatus = tableStore.getRowStatus(record);
  if (!!newValue) {
    if (dataIndex === 'ReportEffectiveDate') {
      if (record.EffectiveDate > record.ReportEffectiveDate) {
        record.EffectiveDate = null;
        tableStore.update(record);
        Modal.error({
          content: translate('ReportEffectiveDatecantbelessthanoldeffectivedate'),
        });
        console.log('error');
      } else if (record.EffectiveDate == record.ReportEffectiveDate) {
        record.ReportEffectiveDate = null;
        tableStore.update(record);
      }
    }
    if (dataIndex === 'EffectiveDate') {
      if (status === 'added') {
        const isValid: boolean = checkIsEffectiveDateValid(record);
        if (!isValid) {
          record.EffectiveDate = null;
          tableStore.update(record);
        }
      } else if (status === 'edited') {
        const maxEffectiveDateRecord: LoadModel = getMaxEffectiveDateRecord(record);
        if (record.EffectiveDate > maxEffectiveDateRecord.EffectiveDate) {
          if (newValue < maxEffectiveDateRecord.EffectiveDate) {
            record.EffectiveDate = oldValue;
            tableStore.update(record);
          }
        }
      }
    }
  }
}

CodePudding user response：

You are still going to need to add checks to see what to call. You can break things up into a function and call it. Might be simple to use a switch

function handleTableRowChange(........) {
  ..........
  switch (dataIndex) {
    case 'ReportEffectiveDate': 
      reportEffectiveDateFunction(record);
      break;  
    case 'EffectiveDate': 
      effectiveDateFunction(record);
      break;  
    case 'edited': 
      editedFunction(record);
      break;  
  }
}

Other option is to use an object or class with the methods

const processingFunctions = {
  ReportEffectiveDate: (report) => {
    console.log('ReportEffectiveDate', report);
  },
  EffectiveDate: (report) => {
    console.log('EffectiveDate', report);
  },
  edited: (report) => {
    console.log('edited', report);
  },
}

function handleTableRowChange(........) {
  ..........
  const action = processingFunctions[dataIndex];
  if (action) { 
    action(report);
  } else {
    // no command found....
  }
}

CodePudding user response：

It looks like your using TypeScript... Like any OOP-like language, you can actually take it one level higher and define an interface.

For readability sake, I would recommend using functions inside of the if-else-if-if... or switch over to case statements. Moving the code into functions helps with maintainability as you change the function itself, and you won't be changing the if-else part of the code, less code changes, less mistakes.