[과제] 계산기 기능 구현하기

문제의 계산기.. aka 두뇌 브레이커

 

지난 시간에 이어 오늘은 자바스크립트로 계산기 기능을 구현하는 실습을 진행했다.

 

엣지 케이스(Edge case)와의 전쟁

 

계산기를 사용할 때 사용자들이 1 + 1 = 2 처럼 정직한 계산만 시행하면 좋겠지만

실생활에서는 수많은 방식의 예외적인 사용법들이 실행된다.

 

예컨대 한번만 입력해야 하는 소수점을 여러 번 누를 수도 있고

더했다 뺐다 나눴다 하는 연속적인 연산을 여러 번 해야 할 수도 있으며

10+0.1을 하고 싶을 때 +를 누른 다음 바로 소수점을 눌러서 0.1을 만들고 싶을 수도 있다.

 

이처럼 일반적인 시나리오와는 다른 예외적인 상황을 엣지 케이스라고 부른다.

계산기는 정확한 결과값을 내는 것이 기능의 전부라고 할 수 있는 만큼

엣지 케이스를 철저하게 처리하는 것이 중요하다.

 

특히나 어려웠던 엣지 케이스

1. 여러 연산을 연속 수행하는 경우

이 엣지 케이스는 두개의 피연산자와 하나의 연산자를 입력한 상태에서 다시 한 번 연산자를 누르면 

앞의 연산을 실행한 결과값을 새로운 피연산자로 해서 다음 연산이 실행되도록 만들어야 한다.

 

firstNum = 첫번째 피연산자
previousNum = 두번째 피연산자
operatorForAdvanced = 연산자
previousKey = 바로 앞에서 누른 키의 타입
 
    if (action === 'operator') {
      //이미 한번 연산이 실행된 경우에는 연산자를 엔터 버튼처럼 사용
      if (previousKey === 'number' && firstNum) {
        previousNum = display.textContent;
        display.textContent = calculate(firstNum, operatorForAdvanced, previousNum);
      }
      firstNum = display.textContent;
      //연산자 저장
      operatorForAdvanced = buttonContent;
      previousKey = 'operator';
    }

 

페어님께서 이 경우에는 연산자를 엔터(=) 버튼처럼 사용하면 되겠다는 아이디어를 내 주셔서

그것에 힌트를 받아 무사히 해결할 수 있었다.

 

2. 엔터(=)를 연타해서 같은 연산을 반복 수행하는 경우

앞 연산의 결과값을 새로운 피연산자로 해서 다음 연산이 실행되도록 만들어야 한다는 점에서 앞의 케이스와 비슷하다.

 

    if (action === 'calculate') {
      //1. firstNum이 있고 엔터를 연타하면 현재 내용을 첫번째 피연산자로 할당하고 최종 연산을 재수행
      //2. firstNum이 있지만 엔터를 처음 눌렀을 때는 현재 내용을 두번째 피연산자로 할당하고 연산을 수행
      if (firstNum) {
        if (previousKey === 'calculate') {
          firstNum = display.textContent;
          display.textContent = calculate(firstNum, operatorForAdvanced, previousNum);
        } else {
          previousNum = display.textContent;
          display.textContent = calculate(firstNum, operatorForAdvanced, previousNum);
        }
      }
      previousKey = 'calculate';
    }