[JavaScript] 자바스크립트 if문 중첩 줄이기!

if문 중첩을 줄이는 이유

if문을 이용해 조건을 만들다가 조건에 또 다른 조건이 필요하다고 판단하여,
if문 안에 if를 넣고 또 else문 안에 if~else 안의 if 등등...
좋지 않은 코드를 짜게 되고, 그리하여 가독성이 안좋아지며 실행 순서를 이해하는것도 힘들어지게 되는 경우가 있습니다.
이런 경우에는 if문의 중첩들을 제거해서 가독성도 올리고 실행 순서를 한눈에 이해하기 쉽게 만들어 주어야 합니다.

if문 중첩 제거 방법

그렇다면 if문의 중첩을 줄일 수 있는 방법은 무엇있까요?
바로 다음과 같습니다.

1. 공통된 절차를 각 분기점 내부에 넣는다
2. 분기점에서 짧은 절차부터 실행하게끔 if문을 작성한다.
3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(반복문 내부의 경우)
4. else를 제거해준다. 이때 중첩되어있던 if문 하나가 제거됩니다.
5. 이러한 방식을 반복하여 중첩을 줄인다.

중첩 제거 적용해보기

// 샘플 코드
function test() {
  let result = "";

  if (one) {
    if (!two) {
      result = "three";
    }
  } else {
    result = "one";
  }

  result += "two";
  return result;
}

1. 공통된 절차를 각 분기점 내부에 넣는다

function test() {
  let result = "";

  if (one) {
    if (!two) {
      result = "three";
    }
  } else {
    result = "one";
  }
  result += "two"; // 공통된 절차
  return result; // 공통된 절차
}

function test() {
  let result = "";

  if (one) {
    if (!two) {
      result = "three";
    }
    result += "two"; // 공통된 절차
      return result; // 공통된 절차
  } else {
    result = "one";
    result += "two"; // 공통된 절차
      return result; // 공통된 절차
  }  
}

2. 분기점에서 짧은 절차부터 실행하게끔 if문을 작성한다.

function test() {
  let result = "";

  if (one) {
    if (!two) {
      result = "three";
    }
    result += "two"; 
      return result;
  } else {
    result = "one";
    result += "two"; 
      return result; 
  }  
}

else 분기점에 코드가 더 짧기 때문에 else문의 내용을 if문의 분기점으로 이동합니다.
그리고 조건에 !을 붙여서 원래 조건의 로직이 맞게끔 수정해주어야 합니다.

function test() {
  let result = "";

  if (!one) { // 조건에 !을 붙여 else일 때로 수정
    result = "one";
    result += "two"; 
      return result;
  } else {
    if (!two) {
      result = "three";
    }
    result += "two"; 
      return result; 
  }  
}

3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(반복문 내부의 경우)

function test() {
  let result = "";

  if (!one) {
    result = "one";
    result += "two"; 
      return result; // 중단
  } else {
    if (!two) {
      result = "three";
    }
    result += "two"; 
      return result; 
  }  
}

4. else를 제거해준다. 이때 중첩되어있던 if문 하나가 제거됩니다.

function test() {
  let result = "";

  if (!one) {
    result = "one";
    result += "two"; 
      return result; 
  } else { // else 제거
    if (!two) {
      result = "three";
    }
    result += "two"; 
      return result; 
  }  
}

function test() {
  let result = "";

  if (!one) { 
    result = "one";
    result += "two"; 
      return result; 
  }

  if (!two) {
    result = "three";
  }
  result += "two"; 
  return result; 
}

5. 이러한 방식을 반복하여 중첩을 줄여 나가기!

참고

ZeroCho TV - 자바스크립트 강좌 4-4. if문 중첩 줄이기