JS - Calculator

해당 계산기 코드샘플은 학습을 위한 예제이다.
간단한 계산기 기능 구현 부터 일반 계산기 기능 구현, 마지막으로 응용 기능 구현까지 이해를 바탕으로 기록했다.

Cotents

1. Bare Minimum Level
2. Intermediate Level

1 - Bare Minimum Level

// 선택자 설정
  const calculator = document.querySelector('.calculator');
  const buttons = calculator.querySelector('.calculator__buttons'); 

  const firstOperend = document.querySelector('.calculator__operend--left');
  const operator = document.querySelector('.calculator__operator');
  const secondOperend = document.querySelector('.calculator__operend--right');
  const calculatedResult = document.querySelector('.calculator__result'); 

1-1. 숫자 버튼을 눌렀을 때 숫자가 화면에 나오도록 구현

  if (action === 'number') {
    // 첫번째 칸이 0일 경우
    // firstOperend.textContent type이 String 이므로 Number로 바꿔준다.
    if(Number(firstOperend.textContent) === 0){ 
      firstOperend.textContent = buttonContent;
    }else {
    // 0이 아닐 경우
      secondOperend.textContent = buttonContent;
    }
  }

1-2. 연산자 버튼을 눌렀을 때 연산자가 화면에 나오도록 구현

  if (action === 'operator') {
    // 연산자를 누를때
    operator.textContent = buttonContent;
  }

1-3. 기본 연산하는 함수 구현

  let number1 = Number(n1);
  let number2 = Number(n2);
  // 연산자의 4가지 경우를 생각함
    if(operator === '+'){
    // a.operator가 + 인 경우
      result = number1 + number2
    }else if(operator === '-'){
    // b.operator가 - 인 경우
      result = number1 - number2
    }else if(operator === '*'){
    // c.operator가 * 인 경우
      result = number1 * number2
    }else {
    // d.operator가 / 인 경우
      result = number1 / number2
    }
  // result 값을 리턴
  return String(result);

1-4. 연산 결과 화면에 나오도록 구현

  if (action === 'calculate') {
    /* 1.첫번째, 두번째, 연산자 변수값 가져오기 */
    let firstNum = firstOperend.textContent;
    let secondNum = secondOperend.textContent;
    let operatorText = operator.textContent;
    // 2.calculate 함수 호출 후 변수 지정
    let result = calculate(firstNum,operatorText, secondNum)
    calculatedResult.textContent= result
  }

1-5. 초기화 기능 구현

  if (action === 'clear') {
    // 첫번째 칸을 "0"으로 초기화
    firstOperend.textContent = '0';
    // 두번째 칸을 "0"으로 초기화 
    secondOperend.textContent = '0';
    // 연산자를 "+"으로 초기화 
    operator.textContent = '+';
    // 결과값 초기화
    calculatedResult.textContent = '0';
  }

CodeOpen으로 보기

---

2 - Intermediate Level

2-1. 숫자 버튼을 눌렀을 때

  if (action === 'number') {
    if (display.textContent === '0 ) {
    // 첫번째 값이 0인 경우
      display.textContent = buttonContent;
    }else {
    // 첫번째 값이 0이 아닌 경우
      display.textContent = display.textContent + buttonContent ;
    }
  }

• 첫번째 값이 0일 경우와 그렇지 않은 경우로 나누어 생각한다.

2-2. 연산자 버튼 눌렀을 때

  if (action === 'operator') {
    // 현재 화면 입력되어 있는 값을 변수 firstNum를 저장 
    firstNum = display.textContent
    // operatorForAdvanced에 연산자 값을 저장 
    operatorForAdvanced = buttonContent;
    // 현재 누르키가 연산자임을 previousKey에 저장
    previousKey = 'operator';
  }

2-3. 연산자를 누르고 숫자를 눌렀을 때

  if (action === 'number') {
    // previousKey가 operator일 경우
    if( previousKey === 'operator' ){
      // 화면에 누른 버튼 값 노출 
      display.textContent = buttonContent
    }else { // previousKey가 operator가 아닐 경우
      if (display.textContent === '0' ) { 
        // 첫번째 값이 0인 경우
        display.textContent = buttonContent ;
      }else {
        // 첫번째 값이 0이 아닌 경우
        display.textContent = display.textContent + buttonContent ;
      }
    }
    previousKey = 'number'
  }

• previousKey의 값을 이용해서 사용자가 전에 누를 버튼이 연산자인지 아닌지 알 수 있다. 이를 이용해서 previousKey가 operator일 경우와 아닐 경우로 나누어 조건문을 만들었다.
• previousKey를 'number'로 바꿔준다.

2-4. 초기화 버튼 눌렀을 때

  if (action === 'clear') {
    // 첫 번째 입력값을 undefined
    firstNum = undefined;
    // 연산자 기호을 undefined
    operatorForAdvanced = undefined;
    // 두 번째 입력값을 undefined
    previousNum = undefined;
    // 계산기의 화면
    display.textContent = '0';
    previouskey = 'clear';
  }

Better Method : 연산자를 누르고 숫자를 눌렀을 때

  if (action === 'number') {
    // previousKey가 operator일 경우
    if( previousKey === 'operator' ){
      // 화면에 누른 버튼 값 노출 
      display.textContent = buttonContent
    }else { // previousKey가 operator가 아닐 경우
      if (display.textContent === '0' ) { 
        // 첫번째 값이 0인 경우
        display.textContent = buttonContent ;
      }else {
        // 첫번째 값이 0이 아닌 경우
        display.textContent = display.textContent + buttonContent ;
      }
    }
    previousKey = 'number'
  }

• display.textContent = buttonContent이 반복되므로 조건문을 수정하여 좀더 간단하게 코드를 정리했습니다.

CodeOpen으로 보기