[Javascript] Calculator ③Calculate

계산 기능을 만들면서 Display Process도 약간 수정했다.

 

1. Calculate

const inputs = document.querySelectorAll('.keyButtons');

let givenKeys = [];
function getValue () {
  if (isNaN(this.value)) {
    saveOrCalc(this.value);
  } else {
    givenKeys.push(this.value);
    givenKeys.splice(-8, givenKeys.length - 7);
  }
}

let numStorage = [];
function saveOrCalc(calculator) {
  numStorage.push(
    {
    value: parseFloat(givenKeys.join('')),
    calculator: calculator
    }
  );
  givenKeys = [];

  if (calculator == '=') {
    let result = numStorage[0]['value'];
    for ( index = 1; index < numStorage.length; index++ ) {
      if (numStorage[index - 1]['calculator'] == '+') {
        result = result + numStorage[index]['value'];
      } else if (numStorage[index - 1]['calculator'] == '-') {
        result = result - numStorage[index]['value'];
      } else if (numStorage[index - 1]['calculator'] == '×') {
        result = result * numStorage[index]['value'];
      } else if (numStorage[index - 1]['calculator'] == '÷') {
        result = result / numStorage[index]['value'];
      }
    }
    numStorage = [];
    givenKeys.push(result);
  }
}

inputs.forEach(input => input.addEventListener('click', getValue));

먼저, 지난 번에 만들었던 최대 7글자까지만을 표시하는 기능은, 7글자까지만을 저장하는 기능으로 바꾸었다. 계산을 수행하기 위해서는 값을 표시하는 것뿐만 아니라 저장해야 할 필요도 있다고 생각했기 때문이다.

모든 input에 대하여 클릭되면 getValue를 실행하도록 이벤트 리스너를 걸었다. getValue는 숫자가 아닌 경우, saveOrCalc 함수를 실행하고, 숫자인 경우에는 최근 누른 7글자를 배열에 저장한다.

saveOrCalc 함수는 numStorage라는 빈 배열에, 연산자가 눌러지기 전까지 저장된 숫자들의 배열을 실수 형태로 바꾼 값을 value로, 전달된 연산자를 calculator로 하는 객체의 형태로 값을 저장한다. 이후 다음 숫자를 저장하기 위하여 givenKeys를 비운다.

전달된 연산자가 '='인 경우에는 계산을 수행해야 한다. 첫 번째 입력된 숫자를 result에 할당하고, 이후 연산자를 구분하여 다음에 입력된 숫자와 계산하도록 작성하였다. 이 계산을 인덱스 변수가 numStorage에 저장된 갯수, 즉 length와 같아지는 지점에서 중지하도록 하고, 계산이 끝난 후 numStorage를 비웠다. 계산된 값인 result를 givenKeys에 저장했다.

 

 

2. Display

function displayProcess(e) {
  const process = document.querySelector('.process');
  process.textContent = givenKeys.join('');
}

inputs.forEach(input => input.addEventListener('click', displayProcess));

displayProcess는 givenkeys를 표시하도록 변경하였다.

 

 

3. 개선점

 - 숫자와 숫자가 아닌 값으로 나누어 if문을 작성했으나, NaN에서도 연산자와 연산자 외의 값이 있으므로 여기에 대해서는 추가적으로 생각해 보아야 한다. 현재는 사칙연산만이 구현된 상태다.

 - 첫 번째 계산 결과를 대상으로 다음 계산을 실행하려면 로직을 조금 변경해야 할 필요가 있다. 객체에 저장되는 값은 {숫자1, 연산자1}, {숫자2, 연산자2}, ...와 같은데, 첫 번째 계산 결과는 연산자를 동반하지 않기 때문이다.