if/else 지옥(feat.스파게티)에서 벗어나 보려고 한번 수정해봤습니다.

간단한 예제 하나를 만들려고 하다가  if/else 지옥이 생겨버렸음..

그냥 무작정 내가 원하는 결과를 만들면서 앞 뒤 생각없이 코드를 막짜다보니, 

얽히고 섥힌 그런 스파게티 소스코드 완성 (^^)

아주 전형적인 사례라 들고 올 수 밖에 없었다.

(의외로 만들때 쉽다고 느낀 이런 소스가 나중에 if/else안에서 복잡하게 얽힐때 유지보수 안됨..)

 

ㅎㅎ 이걸 어떻게 바꿀수 있을까?

if (standardNumVal) {
    if (userNumVal) {
      if (userNumVal <= standardNumVal) {
        resultMsg.innerHTML = `You chose: ${userNumVal} , the machine chose: ${machineNumVal}`;
        if (userNumVal < machineNumVal) {
          resultMsg.innerHTML += "111";
        } else if (userNumVal > machineNumVal) {
          resultMsg.innerHTML += "222";
        } else {
          resultMsg.innerHTML += "3333";
        }
        resultMsg.classList.remove("hidden");
      } else {
        userNum.focus();
      }
    } else {
      userNum.focus();
    }
  } else {
    standardNum.focus();
  }

 

 

조금 더 생각해보니, 굳이 안에서 또 if/else를 발생시키는 소스를 넣어야 하나 싶어서 조금씩 함수화 시켜 정리해보았다.

예전에는 오히려 함수화가 어렵지 않을까 생각해서 무작정 때려박는 스타일이었다면

지금은 함수명을 좀 더 이해하기 쉽게 하면서 분리시켰을때 가장 좋은 소스가 나올 수 있을거라고 생각한다.

//.........

const showNumMsg = (userNum, machineNum) => {
 //함수2
};

const compareResultMsg = (userNum, machineNum) => {
  let msg;
  //...
  //함수3
  return msg;
};


//......

  if (standardNumVal) {
    if (userNumVal) {
      if (userNumVal < standardNumVal) {
        resultMsg.innerHTML = showNumMsg(userNumVal, machineNumVal); //함수2
        result.innerHTML = compareResultMsg(userNumVal, machineNumVal);//함수3
       //.....
      } else {
        userNum.focus();
      }
    } else { 
      userNum.focus();
    }
  } else {
    standardNum.focus();
  }

//.......

 

덜 줄어든것 같아보여도 안에 if/else 한 다섯개는 함수로 훨씬 줄여서 좀더 지옥같지 않은 느낌이 훨씬 있더라.

 

생각할 시간이 충분하니, 좀 더 간편하고 좀 더 예쁜소스를 만드는건 어떨까 하게되니 조금씩이나마 바꿀수 있어 기쁘다.

(물론, 변경된 소스보다 더 나은 소스변경법이 있을듯한데 말이지..)

 

간단한 예제라도 한번씩 더 생각하는 습관을 들이면 훨씬 코드가 생산성 있게 변할거라는걸 몸소 느끼게 되었다.

 

+ 사담

우리 회사 대리님은 연차도 비슷, 나이도 비슷하지만 천상 개발맨이라 그러신지

다양한 디자인패턴과 코드생산성 그리고 클린코드의 중요성을 항상 말씀해주신다. 

특히 시간이 없어서라는 건 다 핑계라고 오히려 습관을 잡고 코딩할수록 코딩시간은 더 단축될 수 있다고 하셨고, 나도 사실 두번생각해보면 소스가 얽히지 않았을때 생산성은 훨씬 줄어들더라.

 

++ 사담

아직도 기초수준의 스파게티를 생산하는 개발자라.. 넘나 부끄러웠다.

이걸 당당하게 예제라고 보여줄수 있을것이냐고 !! ㅠㅠ