Question 189594 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to refactor nested if condition in a function to reduce cognitive complexity in sonar?

In my component, i have written one function for conditional check to disable/enable a button. There are multiple nested conditional check. While running, i am getting ‘Reduce coginitive complexity’ error in sonar and it is critical.

Here is my function

    const isButtonSubmit = computed(() => {
  let disableButton = false;
  if (formInput.value.radio3 === 'yes') {
    if (formInput.value.input1 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio4 === 'yes') {
    if (formInput.value.input2 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio4 === 'no') {
    if (formInput.value.input6 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio5 === 'no') {
    if (formInput.value.input3 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio6 === 'yes') {
    if (formInput.value.input4 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio6 === 'no') {
    if (formInput.value.input5 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio7 === 'no') {
    if (formInput.value.input7 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio8 === 'no') {
    if (formInput.value.input8 === '') {
      disableButton = true;
    }
  }
  if (formInput.value.radio9 === 'no') {
    if (formInput.value.input9 === '') {
      disableButton = true;
    }
  }
  return disableButton;
});

I am getting the warning related to cognitive complexity because of these conditional checks. Please let me know how to resolve this?

Tags:

2

Answers


  1. 0

    The approach to issues like this is always the same, you have to extract the data from the structure and then find a way to apply it efficiently. You should end up with more maintainable and compact code.

    In your case, this could be something like this:

    const disableStates = [
  {radio: 'radio3', value: 'yes', input: 'input1'},
  {radio: 'radio4', value: 'yes', input: 'input2'},
  ...
]
const isButtonSubmit = computed(() => {
  const i = formInput.value
  return disableStates.some(({radio, value, input}) => i[radio] === value && i[input] === '')
}
    Login or Signup to reply.
  2. 0

    The OP could utilize an object literal as configuration which does map all the related data which define the computed button value as disabled. The next provided example code does so by iterating the array of all involved element keys, where for each key one retrieves its related form input value and from the latter the effected configuration for comparing values. The provided data structure is as generic as possible from the element-value side thus still open to changes which target element values individually …

    const submitConfig = {
  radio3: {
    'yes': { comparisonKey: 'input1', comparisonValue: '' },
  },
  radio4: {
    'yes': { comparisonKey: 'input2', comparisonValue: '' },
    'no': { comparisonKey: 'input6', comparisonValue: '' },
  },
  radio5: {
    'no': { comparisonKey: 'input3', comparisonValue: '' },
  },
  radio6: {
    'yes': { comparisonKey: 'input4', comparisonValue: '' },
    'no': { comparisonKey: 'input5', comparisonValue: '' },
  }
  radio7: {
    'no': { comparisonKey: 'input7', comparisonValue: '' },
  },
  radio8: {
    'no': { comparisonKey: 'input8', comparisonValue: '' },
  },
  radio9: {
    'no': { comparisonKey: 'input9', comparisonValue: '' },
  },
};

const isButtonSubmit = computed(() => {

  let disableButton = false;

  // the precedence of element keys matters
  // ['radio3', 'radio4', 'radio5', 'radio6', 'radio7', 'radio8', 'radio9']
  //   .forEach( ... )
  // or ...

  Object
    .keys(submitConfig)
    // `some` should be chosen only in case the first encounter of an
    // disabled button value also means stopping any further iterations.
    // (but there was no indication within the OP'S provided code.)
    .forEach(elementKey => {
      const inputValues = formInput.value;

      const elementValue = inputValues[elementKey];
      const elementConfig = submitConfig[elementKey]?.[elementValue] ?? null;

      if (elementConfig !== null) {

        const { comparisonKey, comparisonValue } = elementConfig;

        disableButton = (inputValues[comparisonKey] === comparisonValue);
      }
    });

  return disableButton;
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search