[JAVASCRIPT] if문 중첩 제거하기

해당 내용은 아래의 제로초님 강의 영상을 듣고 정리한 내용입니다.

https://youtu.be/NUOPdY14JKo?si=eTQwg49sclen6YLr

 

---

제로초님 javascript 강의를 듣던 중 너무 좋은 내용이 있어서 정리하면서 복습할 겸 글을 쓰기로 했다.

이 내용은 javascript 뿐만 아니라 다른 언어에서도 공통적으로 적용이 되니 다른 사람들이 많이 봤으면 좋겠다.

 

let numOne = '';

let operator = '';

let numTwo = '';

const $operator = document.querySelector('#operator');

const $result = document.querySelector('#result');

const onClickNumber = (event) => {

    if (operator) {

      if (!numTwo) {

        $result.value = '';

      }

      numTwo += event.target.textContent;

    } else {

      numOne += event.target.textContent;

    }

    $result.value += event.target.textContent;

};

코드를 짜다보면 위의 사진처럼 중첩 if문이 나와 가독성이 떨어지는 상황을 많이 겪었을 것이다.

이럴 때 강의에서 알려주는 방법을 사용하면 중첩 if문의 가독성을 높일 수 있다.

 

---

 

중첩 if문 제거하는 법

1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.
2. 분기점에서 짧은 절차부터 실행하게 if문을 작성한다.
3. 짧은 절차가 끝나면  return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다.
4. else를 제거한다.(이때 중첩 하나가 제거된다.)
5. 위의 내용을 반복한다.

---

위의 방법대로 코드를 수정해 보겠다.

 

let numOne = '';

let operator = '';

let numTwo = '';

const $operator = document.querySelector('#operator');

const $result = document.querySelector('#result');

const onClickNumber = (event) => {

    if (operator) {

      if (!numTwo) {

        $result.value = '';

      }

      numTwo += event.target.textContent;

      $result.value += event.target.textContent;

    } else {

      numOne += event.target.textContent;

      $result.value += event.target.textContent;

    }

};

먼저 if문 다음에 나오는 공통된 절차인 '$result.value += event.target.textContent'를 각 분기점에 넣어 주었다.

 

let numOne = '';

let operator = '';

let numTwo = '';

const $operator = document.querySelector('#operator');

const $result = document.querySelector('#result');

const onClickNumber = (event) => {

    if (!operator) {

      numOne += event.target.textContent;

      $result.value += event.target.textContent;

    } else {

      if (!numTwo) {

        $result.value = '';

      }

      numTwo += event.target.textContent;

      $result.value += event.target.textContent;

    }

};

그리고 분기점에서 짧은 절차인 else 부분의 내용부터 실행하도록 if 문의 조건 operator를 !operator로 변경해주고

if 의 내용과 else의 내용을 서로 바꿔주었다.

 

let numOne = '';

let operator = '';

let numTwo = '';

const $operator = document.querySelector('#operator');

const $result = document.querySelector('#result');

const onClickNumber = (event) => {

    if (!operator) {

      numOne += event.target.textContent;

      $result.value += event.target.textContent;

      return;

    }

    if (!numTwo) {

      $result.value = '';

    }

    numTwo += event.target.textContent;

    $result.value += event.target.textContent;

};

다음으로 위의 짧은 절차가 끝나고 return으로 종료를 시켜주면 밑의 else는 필요가 없어지기에 지워주었다.

이렇게 하면 중첩이 하나 제거되었기 때문에 깔끔한 코드가 되었다.

이제 이 과정들을 반복해주면 중첩이 하나씩 제거가 되어 가독성 있는 코드를 작성하기 수월해질 것이다.