Es2020 3강 Calculator

계산기의 순서도를 그려본다.

모든 생각을 순서도로 그릴순 없기때문에 순서도를 그리지 않고도 코딩을 할 수 있는 부분은 코딩을 하고 머리속으로 하기 힘든 부분은 순서도를 작성한다.

const numberInput =  document.querySelector('#input');
const clearButton =  document.querySelector('#clear');
const plusButton =  document.querySelector('#plus');
const minusButton =  document.querySelector('#minus');
const divideButton =  document.querySelector('#divide');
const multiplyButton =  document.querySelector('#multiply');
const calculateButton =  document.querySelector('#calculate');
const resultInput =  document.querySelector('#result');

이와 같이 변수를 지정하는 것은 순서도를 굳이 쓰지않아도 코딩할 수 있기 때문에. 순서도에 넣지 않는다.(점점 이러한 것들을 늘려나간다)

null : 초기화 (undefined)

순서도대로 코딩을 했으나 동작하지 않는다면 순서도와 코딩을 비교하며 다시 분석한다.

5 + 6 = 작동하였을때 56이 나오게 되면 문자열로 인식한 것이다
=> 숫자로 표시하고 싶다면
temp = Number(numberInput.value)
로 문자열을 숫자로 지정한다.

문자열이 포함되어있는 +는 나머지가 문자열로 바뀌어서 연산되지만
-, *, / 은 문자열이 숫자로 바뀌어서 연산된다.

plusButton.addEventListener('click', () => {
    if (temp) {
        operator = '+'
    } else {
        if (numberInput.value) {
            temp = Number(numberInput.value)
            operator = '+'
            numberInput.value = null
            resultInput.value = null
        }
    }
})

minusButton.addEventListener('click', () => {
    if (temp) {
        operator = '-'
    } else {
        if (numberInput.value) {
            temp = Number(numberInput.value)
            operator = '-'
            numberInput.value = null
            resultInput.value = null
        }
    }
})
multiplyButton.addEventListener('click', () => {
    if (temp) {
        operator = '*'
    } else {
        if (numberInput.value) {
            temp = Number(numberInput.value)
            operator = '*'
            numberInput.value = null
            resultInput.value = null
        }
    }
})

divideButton.addEventListener('click', () => {
    if (temp) {
        operator = '/'
    } else {
        if (numberInput.value) {
            temp = Number(numberInput.value)
            operator = '/'
            numberInput.value = null
            resultInput.value = null
        }
    }
})

이와 같은 중복을 최대한 제거해주는 것이 좋다.(같은짓을 계속하는 것을 최대한 기피한다)

버그를 발견했을때 순서도에서 찾아보고 코드와 다시 비교.

calculateButton.addEventListener('click', () => {
    console.log(temp, operator, numberInput.value)
    if (operator) {
        if (numberInput.value) {
            if (operator === '+') {
                resultInput.value = temp + Number(numberInput.value)
            }
            else if (operator === '-') {
                resultInput.value = temp - Number(numberInput.value)
            }
            else if (operator === '*') {
                resultInput.value = temp * Number(numberInput.value)
            }
            else if (operator === '/') {
                resultInput.value = temp / Number(numberInput.value)
            }
        }
        temp = resultInput.value
    }
    else {
        if (numberInput.value) {
            resultInput.value = temp
        }
    }
}
)

에서 결과값 13에 + 4를 하면 134가 되는 버그가 존재 이를 마지막
temp = resultInput.value 값이 문자로 인식되었기때문 이를
temp = Number(resultInput.value) 로 바꾸어 숫자로 인식되게 해야한다.
버그 => 누군가가 그 버그를 다시 재연해야한다.(Test를 계속하여 버그를 찾아야한다)