如何改进这段 JS 代码以使其看起来更优雅

Question

In my React app using Material UI, I wrote a code to manage the size of the fields of a contact form. Those fields are elements that can be added or removed depending on a configuration.

The code I wrote works as expected but looks ugly and I need help to make it better.

let size = 12;
    if (useMediaQuery(theme.breakpoints.up('sm'))) {
      const hasTime = fieldsConfig.some(
        f => f.name === 'preferredContactHours',
      );
      const hasContactType = fieldsConfig.some(
        f => f.name === 'preferredContactWay',
      );
      if (name === 'phone' && (!hasTime || !hasContactType)) size = 7;
      else if (name === 'preferredContactWay' && hasTime) size = 6;
      else if (name === 'preferredContactWay' && !hasTime) size = 5;
      else if (name === 'preferredContactHours' && hasContactType) size = 6;
      else if (name === 'preferredContactHours' && !hasContactType) size = 5;
    }

The size is 12 by default, so if any of the conditions are not applicable, the field will still be full size in the grid.

The fields hasTime and hasContactType are optional so I need to check if they are present or not.

The rest is checking if the fields are or aren't there and setting sizes accordingly.

What I'd need is to have it better and more efficient than all this verbose code, if that's possible.

Answer 1

There are many ways to improve the quality of the code. This is not the only way. I think this can turn your code in a more high cohesion e less coupled style. Hope this helps you.

ps I not tested the code.

 const sizeResult = document.querySelector('#size') let size = 12 const name = 'preferredContactWay' const fieldsConfig = [{ name: 'preferredContactHoursss' }] const useMediaQuery = () => true // Object size configuration. This helps to avoid `if`s. const sizeConfiguration = { preferredContactWay_true: 6, preferredContactWay_false: 6, preferredContactHours_true: 6, preferredContactHours_false: 6, phone: 7, } /* SRP (Single Responsibility Principle). One of the SOLID principles and a good practice of the Clean Architecture Each function must have only one reason to change (single responsibility) */ function getHasTimeValue() { return fieldsConfig.some( f => f.name === 'preferredContactHours', ) } function getHasContactTypeValue() { return fieldsConfig.some( f => f.name === 'preferredContactWay', ) } function getSize(_name) { const param = getHasTimeValue() ? getHasTimeValue() : getHasContactTypeValue() return param ? sizeConfiguration[`${_name}_${param}`] : sizeConfiguration['phone'] } function Main() { if (useMediaQuery()) { size = getSize(name) sizeResult.innerHTML = size } } Main() sizeResult.innerHTML = size

 <div id="size"></div>