계산기 구현

1. 계산기 함수 구현

function calculate(n1, operator, n2) {
  let result = 0;

  if(operator === '+') result = Number(n1) + Number(n2);
  if(operator === '-') result = Number(n1) - Number(n2);
  if(operator === '*') result = Number(n1) * Number(n2);
  if(operator === '/') result = Number(n1) / Number(n2);

  return String(result);
}

1. 함수를 호출하면 n1과 n2를 operator에 담겨있는 연산자에 따라 계산을 한다.
2. 계산 결과를 result에 할당한다.
3. 문자열 result를 반환한다.

---

2. 각 버튼 작동 코드

• display는 화면상에 나올 텍스트 태그
• buttonContent는 누른 버튼의 값
• 아래의 변수들은 null값으로 선언되어 있다고 가정

  1. operatorForAdvanced : 연산자를 저장하는 변수
  2. firstNum : 처음 값을 저장하는 변수
  3. previousNum : 나중 값을 저장하는 변수
  4. previousKey : 이전에 누른 버튼의 값을 저장하는 변수

(1) number(숫자)버튼

if (action === 'number') {
	if(!operatorForAdvanced){
		if(!firstNum || firstNum === '0'){
			firstNum = buttonContent;
        } else {
			firstNum += buttonContent;
        }
        display.textContent = firstNum;
	}
    if (operatorForAdvanced){
    	if(!previousNum || previousNum === '0'){
			previousNum = buttonContent;
        } else {
			previousNum += buttonContent;
        }
		display.textContent = previousNum;
	}
	previousKey = buttonContent;
}

1. 처음 입력받을 숫자와 연산자 후의 두번째 입력받을 숫자의 구별을 위해 operatorForAdvanced의 여부로 조건을 나누었다.
2. 첫번째 자리 숫자를 입력하기 전과 입력한 후로 나누었는데, 이는 초기 상태 때 display.textContent의 값이 0이기 때문에 3을 입력하면 03이 되는것을 방지하기 위해서 이다.

(2) operator(연산자)버튼

if (action === 'operator') {
	if(firstNum){
		if(firstNum && previousNum){
			firstNum = calculate(firstNum, operatorForAdvanced, previousNum);
			operatorForAdvanced = buttonContent;
			previousNum = null;
		} else{
			operatorForAdvanced = buttonContent;
		}
        previousKey = buttonContent;
	}
}

1. 첫번째 숫자 없이 연산자부터 누를 경우를 없애기 위해 firstNum이 true일 때만 실행되도록 하였다.
2. 여러개의 숫자와 연산자를 받고도 계산을 지속할 수 있게 하기 위해 조건을 만들었다.

(3) decimal(소수점)버튼

if (action === 'decimal') {
	if(previousKey !== '.'){
		if(!operatorForAdvanced){
			if(!firstNum || firstNum === '0'){
				firstNum = '0' + buttonContent;
			} else {
				firstNum += buttonContent;
			}
			display.textContent = firstNum;
		}
        if (operatorForAdvanced){
			if(!previousNum || previousNum === '0'){
				previousNum = '0' + buttonContent;
			} else {
				previousNum += buttonContent;
			}
			display.textContent = previousNum;
		}
	}
	previousKey = buttonContent;
}

1. 소수점 버튼을 여러번 눌렀을 경우 소수점이 계속해서 붙으면 안되므로 전에 입력한 버튼 값을 담고 있는 previousKey의 값이 .이 아닐때만 작동하도록 하였다.
2. operatorForAdvanced의 여부로 첫번째 숫자인지 두번째 숫자인지를 구분하였다.

(4) clear(초기화)버튼

if (action === 'clear') {
	display.textContent = '0';
	firstNum = null;
	operatorForAdvanced= null;
	previousKey = null;
	previousNum = null;
}

1. 처음 상태로 되돌려하 하므로 화면상의 결과를 0으로 바꿔준다.
2. 변수들의 초기값은 null이었으므로 null을 할당해 준다.

(5) calculate(계산)버튼

if (action === 'calculate') {
	if(previousKey !== 'calculate'){
		if(!firstNum && !operator && !previousNum){
			display.textContent = '0';
		} else if(!operator && !previousNum){
			display.textContent = firstNum;
        } else if(!previousNum){
			display.textContent = calculate(firstNum, operatorForAdvanced, firstNum);
        } else {
			display.textContent = calculate(firstNum, operatorForAdvanced, display.textContent);
        }
	} else {
		display.textContent = calculate(display.textContent, operatorForAdvanced, previousNum);
	}
		previousKey = 'calculate';
}

1. 위의 버튼들에서 각 변수들의 값이 있는지 없는지에 따라 여러 조건들이 나뉘어 졌으므로 그에 따라 올 수 있는 경우들에 따라 계산을 달리하도록 하였다.