계산기

if문 중첩

고차 함수를 이용하여 함수의 중복을 없애주었다.
그리고 동작을 해봤는데 3 + 4 가 입력되면, 사진처럼 34가 찍히는 것을 볼 수 있었다.

이 과정에서 if문이 중첩이 된다.

<script>
	if (operator) {
    	if (!numTwo) { // numTwo가 처음 클릭하는 화면에서는 화면을 지우기
        	$result.value = '';
        }
        numTwo += number;
    } else {
    	numOne += number;
    }
    $result.value += event.target.textContent;
</script>

if문이 중첩되면 점점 더 읽기 어려워지므로, if문 중첩을 피하는 방법에 대해 공부했다.

if문 중첩을 피하기 위한 절차

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

위 절차를 따라 if문을 지워보겠다.
기존 코드 :

<script>
	if (operator) {
    	if (!numTwo) { // numTwo가 처음 클릭하는 화면에서는 화면을 지우기
        	$result.value = '';
        }
        numTwo += number;
    } else {
    	numOne += number;
    }
    $result.value += event.target.textContent;
</script>

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

<script>
  if (operator) {
      if (!numTwo) { 
          $result.value = '';
      }
      numTwo += number;
      $result.value += event.target.textContent;
  } else {
      numOne += number;
      $result.value += event.target.textContent;
  }
</script>

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

위 코드에서는 if문 안에 if문과 else문이 있는 구조인데. else문이 처음 if문과의 분기점이 짧으므 처음 if문의 조건에 not(!)을 붙여 짧은 절차부터 실행하게 만든다.

<script>
  if (!operator) {
      numOne += number;
      $result.value += event.target.textContent;
  } else {
      if (!numTwo) {
          $result.value += '';
      }
      numTwo += number;
      $result.value = event.target.textContent;
  }
</script>

3. 짧은 절차가 끝나면 return이나 break로 중단한다.

우리는 함수 내부의 경우이니 return을 추가하여 중단한다.

<script>
  if (!operator) {
        numOne += number;
        $result.value += event.target.textContent;
        return;
    } else {
        if (!numTwo) {
            $result.value += '';
        }
        numTwo += number;
        $result.value = event.target.textContent;
    }
</script>

4. else 제거하기

return이 나오면 else가 필요없으니, else를 지워준다.
그래서 if문안에 if문이 들어있는 코드가 없어진다.

<script>
  if (!operator) {
      numOne += number;
      $result.value += event.target.textContent;
      return;
  }
  if (!numTwo) {
      $result.value += '';
  }
  numTwo += number;
  $result.value = event.target.textContent;
</script>