【Javascript 】전자계산기 만들기

 

삽질특화 맨땅에 헤딩전문 새내기 개발자의 공부 일지①

Javascript로 사칙연산되는 계산기 만들기

 

프로그래밍 연수를 시작하고 2주가 채 되지않아 받은 최초의 과제다운 과제

포인트는 eval함수를 사용하지 않을 것.

 

인터넷에도 js로 전자계산기를 만드는 포스팅은 많이 있지만, 대부분이 eval함수를 사용하는 포스팅이었다. eval함수를 사용하면 입력값을 그대로 받아와서 계산해주기 때문에 굉장히 편리하지만, 반대로 말하자면 eval함수를 사용하지 않는다는 것은 전자계산기와 사칙연산의 로직을 전부 이해하고 함수로 작성해야한다는 것이었다.

따라서, 이번 과제의 목표는 완벽한 전자계산기의 구현이 아닌 로직의 이해에 있었다.

 

처음 러프단계에서 생각했었던 로직은 다음과 같다.

• 기본적인 사칙연산의 구현
• 연산자를 누를 때마다 숫자가 초기화 됨
• 연산자를 누를 때마다 그 전 계산값이 저장됨
• AC를 누르면 계산기 초기화

 

만들면서 추가된 로직은 다음과 같다.

• 연산자와 '='가 연속으로 입력되지 않아야함
• '='가 입력된 후 결과창이 초기화되어야함
• 처음부터 연산자가 입력되지않아야함

 

 

 

러프 때는 연산자마다 함수를 따로 만들려고 했다.

그런데 하다보니 초기값이 같은 덧셈 뺄셈이랑 곱셈나눗셈 두개로 줄여도 될 것 같았다.

그런데 또 하다보니 이것도 하나로 줄이고 전부 if로 걸러내면 될 것 같았다.

 

최종적으로 완성된 함수는

• 숫자입력용 add 함수
• 연산자 입력용 setOperator함수
• 초기화용 reset함수
• 실제 계산용 equal함수

 

총 4가지였다.

<script>
            var i = 1; //표시창을 리셋할지말지 판단하는 변수
            var currentOperator = 0; //연산자를 기억하기 위한 변수
            var num = 0; // 숫자1 연산자 숫자2에서 숫자1을 담당
            var currentnum = 0; //숫자 2를 담당
            var display = document.getElementById('display');
            var result = document.getElementById('result');
 
            function add(newnum){
              if(i%2 == 0){
              display.value = display.value + newnum;
              result.value = result.value + newnum;
            }
              else if (i%2 != 0) {
              document.getElementById('result').value = "";
              display.value = display.value + newnum;
              result.value = result.value + newnum;
              i++;
            }              //연산자입력으로 숫자입력이 끝났는지 판단
 
            function reset() {
              document.getElementById('display').value = "";
              document.getElementById('result').value = "";
              i = 1; //처음부터 연산자 입력이 되지않게 1로 설정
              currentOperator = 0;
              num = 0;
              currentnum = 0;
            }
 
            function setOperater(newOperator) {
              if (i == 2){
                currentOperator = newOperator;
                num = parseFloat(result.value);
                i++;
                display.value = display.value + newOperator;
              } else if (i > 0 && i%2 == 0){
                currentnum =  parseFloat(result.value);
                currentnum = equal();
                i++;
                currentOperator = newOperator;
                display.value = display.value + newOperator;
              }
                else if (i%2 != 0) {
                alert('숫자를 입력해주세요')
              }
            }
 
 
            function equal(){
              var currentnum = parseFloat(result.value);
              if (currentOperator == "+"){
                  currentnum += num;
                  currentnum = parseFloat(currentnum);
                  result.value = currentnum;
                  num = currentnum;
                }
                else if(currentOperator == "-"){
                  currentnum = num - currentnum;
                  currentnum = parseFloat(currentnum);
                  result.value = currentnum;
                  num = currentnum;
                }
                else if(currentOperator == "*"){
                 currentnum *= num;
                 currentnum = parseFloat(currentnum);
                  result.value = currentnum;
                  num = currentnum;
                }
                else if(currentOperator == "/"){
                  currentnum = num / currentnum;
                  currentnum = parseFloat(currentnum);
                  result.value = currentnum;
                  num = currentnum;
                }
              }
 
          </script>
 
 

선생님이 요구하신 수준은 다른 에러상황은 전부 배제하고, 순수하게 사칙연산만 되면 OK였다. '7+4'를 입력해서 '='를 누르면 '11'이 되면 OK였던것. 그런데 하다보니 각종 에러상황에 대비할 수 있는 함수를 만들 수 있을 것 같았고, 결국 처음에 기한에 맞춰서 제출한 이후 근 한 달동안 남는시간에 더 붙잡고 있다가 지금의 수준에서 마무리를 했다. 

최종적으로 마무리된 코드에 대해 선생님이 해주신 리뷰는 처음에 정의된 변수 currentnum이 실제로 쓰이지 않고 로컬 변수로 쓰이고 있다는 것과 39행째에 리턴값이 없기 때문에 equal();로 써도 괜찮다는 점이었다.

이후 더 시간이 있으면 '=','.','0'이 연속으로 입력되지않게 하고 싶다.