계산기 만들기 | if문 중첩 줄이기

이전까지 작성한 코드를 실행을 해 보자.

🚨 오류 발생

numOne 입력 후 numTwo 입력시 숫자가 계속 이어져서 보여지는 현상 발생.

---

✅ 이유

numOne 입력했던 value 값이 계속 보여지기 때문.

---

💡 해결

numTwo 값이 입력되지 않았을 경우 $result.value 값을 비운다.

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문이 여러번 중첩될 수록 코드는 읽기 어려워진다.
중첩을 제거하는 방법을 알아 보자.

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

📍 예제

위에 작성한 코드를 예시로 중첩문을 줄여 보자.

const onClickNumber = (event) => {
  if (operator){ // 비어있지 않다
    if(!numTwo){
      $result.value='';
    }
    numTwo += event.target.textContent;
  } else { // 비어있다
    numOne += event.target.textContent;
  }
  $result.value += event.target.textContent;
}

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

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;
  }
}

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

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;
  }
}

3. 짧은 절차가 끝나면 return (함수 내부의 경우) 이나 break(for문 내부의 경우)로 중단한다.

const onClickNumber = (event) => {
  if (!operator){ // 비어 있다
    numOne += event.target.textContent;
 	$result.value += event.target.textContent;
	return;
  } else {	// 비어 있지 않다
    if(!numTwo){
      $result.value='';
    }
    numTwo += event.target.textContent;
  	$result.value += event.target.textContent;
  }
}

4. else 를 제거한다. (이때 중첩 하나가 제거)

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;
};

📍 실습

아래 중첩문을 줄여 보자.

function test(){
  let reslult = '';
  if (a) {
    if (!b){
      result ='c';
    }
  } else {
    result = 'a';
  }
  result += 'b';
  return result;
}

1. if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.

function test(){
  let reslult = '';
  if (a) {
    if (!b){
      result ='c';
    }
    result += 'b';
    return result;
  } else {
    result = 'a';
    result += 'b';
    return result;
  }
}

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

function test(){
  let reslult = '';
  if (!a) {
    result = 'a';
    result += 'b';
    return result;
  } else {
     if (!b){
      result ='c';
    }
    result += 'b';
    return result;
  }
}

3. 짧은 절차가 끝나면 return (함수 내부의 경우) 이나 break(for문 내부의 경우)로 중단한다.

이미 return 이 되어 있다.
다음 절차로 넘어간다.

function test(){
  let reslult = '';
  if (!a) {
    result = 'a';
    result += 'b';
    return result;
  } else {
     if (!b){
      result ='c';
    }
    result += 'b';
    return result;
  }
}

4. else 를 제거한다. (이때 중첩 하나가 제거)

function test(){
  let reslult = '';
  if (!a) {
    result = 'a';
    result += 'b';
    return result;
  } 
  if (!b){
    result ='c';
  }
  result += 'b';
  return result;
}