If문 중첩 줄이기

If문 중첩을 줄여보자

If문은 한번 중첩해서 사용하고 나면 계속 해서 중첩해 사용할 확률이 높기때문에 코드의 가독성을 위해 if문의 중첩을 줄여주는게 좋다.

If문의 중첩을 3단계에 걸쳐서 줄여보자.

1. 제일 바깥쪽에 위치한 if문이 끝난뒤 공통된 동작문이 있는지 확인한다. 만약 있으면 해당 동작문들을 if문의 각 분기점 내부에 넣어준다.

예시 코드를 살펴보자.

const test = () => {
  let result = '';
  if(a) {
    if (!b) {
      result = 'c';
    }
  } else {
    result = 'a';
  }
  //공통된 동작문
  result += 'b';
  return result;
}

저 공통된 동작문이 있는 것을 확인 했으면

const test = () => {
  let result = '';
  if(a) {
    if (!b) {
      result = 'c';
    }
    //공통된 동작문
    result += 'b';
    return result;
  } else {
    result = 'a';
    //공통된 동작문
    result += 'b';
    return result;
  }
  
}

이렇게 분기점마다 넣어준다.

2. if문 안 분기된 절차의 길이를 비교하여 더 짧은 절차를 위로 올려 재배치한다. 재배치가 되었으면 조건이 바뀌었기 때문에 조건문안에 "!" 를 넣어준다. (재배치를 하지 않았다면 안붙혀줘도 된다.)
   
   

2단계를 적용해보자

const test = () => {
  let result = '';
  if(a) {
    //긴 절차
    if (!b) {
      result = 'c';
    }
    result += 'b';
    return result;
  } else {
    //짧은 절차
    result = 'a';
    result += 'b';
    return result;
  }
}

위의 코드를 보면 짧은 절차가 밑에 위치해 있기 때문에 짧은 절차를 먼저 실행 해주기위해 2단계에서 언급한대로 위로 올려 재배치해준다.

const test = () => {
  let result = '';
  if(!a) { // 재배치에 의해 조건이 바뀌었으므로 "!"를 추가해준다.
    //짧은 절차
    result = 'a';
    result += 'b';
    return result;
  } else {
    //긴 절차
    if (!b) {
      result = 'c';
    }
    result += 'b';
    return result;
  }
}

3. 짧은 절차가 끝나는 지점에다가 함수일경우는 "return"을, 반복문일 경우는 "break"를 넣어준뒤 else를 지워준다. return이 실행된 후에는 else가 필요하지 않기 때문이다.

const test = () => {
  let result = '';
  if(!a) {
    result = 'a';
    result += 'b';
    return result;//이미 넣어져있는 경우는 생략해도된다.
  } //else를 지워줌
  if (!b) {
    result = 'c';
  }
  result += 'b';
  return result;
}

이렇게 else를 지우고 나면 하나의 중복된 if가 사라지는걸 볼수있다.

• 참고
  https://www.gilbut.co.kr/book/view?bookcode=BN003114