code bad smell - 중첩 if문

code bad smell - 중첩 if문

if문의 중첩은 잘만 쓴다면 나쁘지 않습니다.
하지만 대부분의 코드의 경우에는 중첩이 될수록 흐름을 읽기 힘들기 때문에 나쁜 코드가 많습니다.
수많은 if와 else가 있으면 어떤 조건에 대한 else인지 알 수 힘들기도 합니다.
게다가, 유지보수할 경우에는 수정하기도 어려움이 생깁니다.

예를 들어 아래 코드를 보았을때, "error" 라는 글씨가 출력되기 위한 조건이 무엇일까요?

function check(first, second, third, fourth){
 if( first == true ) {
  if( second == true ) {
   if( third == true ) {
    if( fourth == true ) {
     return 'OK';
    }
    else {
     return 'invalid';
    }
   }
   else {
    return 'error';
   }
  }
  else {
   return 'exception';
  }
 }
 else {
  return 'unknown';
 }
}

우선 first == true여야할테고, second가 true여야 하고, third가 false여야 합니다.
직접 확인해보시면 따라가는데 시간이 좀 걸릴 수 있습니다.
좀 더 읽기 쉬운 코드로 개선하려면 어떻게 될지 개선해보겠습니다.

위 경우에서는 early return 방식으로 개선할 수 있습니다.
if조건문을 변형시켜서 조기에 return 시켜 로직을 중단하는 기법입니다.
첫번째 if문 위주로 함수롤 분석해보면 아래와 같습니다.

function check(first, second, third, fourth){
 if( first == true ) {
  ...
 }
 else {
  return 'unknown';
 }
}

first == true가 "아닐때" 결과값(unknown)을 반환한다는것에 대한 조건식을 앞으로 바꿔도
동일한 로직임을 알 수 있습니다.

function check(first, second, third, fourth){
 if( !(first == true )) {
  return 'unknown';
 }
 else {
  ...
 }
}

여기서 if 문에 걸리면 이미 return 이 되기 때문에 뒤에 else{} 블록은 없애도 무방합니다.
또한, !(first == true) 는 first == false와 동일한 의미입니다.
이제 ...을 다시 펼쳐보면 아래와 같은 코드가 됩니다.

function check(first, second, third, fourth){
 if(first == false ) {
  return 'unknown';
 }
 if( second == true ) {
  if( third == true ) {
   if( fourth == true ) {
    return 'OK';
   }
   else {
    return 'invalid';
   }
  }
  else {
   return 'error';
  }
 }
 else {
  return 'exception';
 }
}

중첩이 없어져 조금 읽기가 편해졌을 것입니다.
아직 잘 모르시겠다구요? 똑같은 작업을 second에 대해서도 해보겠습니다.
먼저, if(!(second == true)) 라면 return "exception" 이고,
맨 뒤의 else문은 지울 수 있습니다.

function check(first, second, third, fourth){
 if(first == false ) {
  return 'unknown';
 }
 if(!(second == true)){
  return 'exception';
 }
 if( second == true ) {
  if( third == true ) {
   if( fourth == true ) {
    return 'OK';
   }
   else {
    return 'invalid';
   }
  }
  else {
   return 'error';
  }
 }
}
 

if(second == true) 는 이미 앞선 !(second == true) 조건이 아닌것을 만족하기 때문에
삭제해도 되며, if(!(second == true))는 if(second == false) 와 같은의미입니다.
이를 반영하면, 아래와 같습니다.

function check(first, second, third, fourth){
 if(first == false ) {
  return 'unknown';
 }
 if(second == false){
  return 'exception';
 }
 if( third == true ) {
  if( fourth == true ) {
   return 'OK';
  }
  else {
   return 'invalid';
  }
 }
 else {
  return 'error';
 }
}

어떤가요 훨씬 더 보기 쉽지 않나요? 마찬가지로, third와 fourth 에 대한 condition 도
마찬가지로 리팩토링을 해보면 최종 코드는 아래와 같이 됩니다.

function check(first, second, third, fourth){
 if(first == false ) {
  return 'unknown';
 }
 if(second == false){
  return 'exception';
 }
 if(third == false ) {
  return 'error';
 }
 if(fourth == false ) {
  return 'OK';
 }
 return 'invalid';
}

{} 를 없애고 싶고, first, second, third,fourth는 boolean 이므로 좀 더 짧게 표현하고 싶다면
아래와 같이 더 짧게도 표현이 가능합니다.

function check(first, second, third, fourth){
 if(!first) return 'unknown';
 if(!second) return 'exception';
 if(!third) return 'error';
 if(!fourth) return 'OK';
 return 'invalid';
}

자, 그럼 다시 처음 코드와 비교해보겠습니다.
딱봐도 개선된 코드가 훨씬 한눈에 잘 들어오지 않나요?

//원래 코드
function check(first, second, third, fourth){
 if( first == true ) {
  if( second == true ) {
   if( third == true ) {
    if( fourth == true ) {
     return 'OK';
    }
    else {
     return 'invalid';
    }
   }
   else {
    return 'error';
   }
  }
  else {
   return 'exception';
  }
 }
 else {
  return 'unknown';
 }
}

if문으로 인해 코드가 너무 복잡해 보인다면 이와 같이 early return 하는 방식으로
코드를 개선가능한지 고민해보시면 코드 유지보수하기가 굉장히 쉬워집니다.

 총평

단순 기능동작만하기 위해 if문을 남발하여 코딩을 하는 경우가 많이 있습니다.
비하하려는것은 아니지만, ~~학원 출신으로 단기간 코스로 코딩을 배우시는 분들이 이런식으로 구현을 많이 하시는 경우를 많이 보았습니다.
if문 중첩 코드가 많이 보인다면, 오늘 소개해드린 early return 방식으로 코드개선해보려고 노력하면 굉장히 유용할거 같습니다.
로직은 그대로 유지가 되는데에 비해 유지보수 비용이 급격히 줄어들 수 있고,
도메인 지식을 몰라도 개선이 가능하기에 코드리뷰 시에 제가 많이 개선요청을 하기도 하는 포인트이기도 합니다.
저 또한, 코딩할때 이 방식으로 if중첩을 많이 줄여 코드 작성시 에러도 많이 줄일 수 있었습니다.

 

 

code bad smell - 중첩 if문

#code, #bad, #smell, #badsmell, #중첩if, #중첩, #if

 

https://devscb.com/post/112

code bad smell - nested if statements