자바스크립트 계산기

    <input readonly id="operator">
    <input readonly type="number" id="result">
    <div class="row">
        <button id="num-7">7</button>
        <button id="num-8">8</button>
        <button id="num-9">9</button>
        <button id="plus">+</button>
    </div>
    <div class="row">
        <button id="num-4">4</button>
        <button id="num-5">5</button>
        <button id="num-6">6</button>
        <button id="minus">-</button>
    </div>
    <div class="row">
        <button id="num-1">1</button>
        <button id="num-2">2</button>
        <button id="num-3">3</button>
        <button id="divide">/</button>
    </div>
    <div class="row">
        <button id="clear">C</button>
        <button id="num-0">0</button>
        <button id="calculate">=</button>
        <button id="multiply">x</button>
    </div>

    <script>
        let firstNum = ''
        let secondNum = ''
        let operator = ''
        let $operator = document.querySelector('#operator')
        let $result = document.querySelector('#result')

        let onClickOperator = (op) => () => {
            if (operator) {
                switch (operator) {
                    case '+': $result.value = parseInt(firstNum) + parseInt(secondNum); break;
                    case '-': $result.value = parseInt(firstNum) - parseInt(secondNum); break;
                    case '/': $result.value = parseInt(firstNum) / parseInt(secondNum); break;
                    case '*': $result.value = parseInt(firstNum) * parseInt(secondNum); break;
                }
                firstNum = $result.value
                secondNum = ''
                operator = op
                $operator.value = op
            }
            else {
                if (firstNum) {
                    operator = op;
                    $operator.value = op;

                }
                else {
                    alert('숫자를 먼저 입력해주세요')
                }
            }
        }

        let onClickNumber = (event) => {
            if (!operator) {
                firstNum += event.target.textContent;
                $result.value += event.target.textContent
                return
            }
            if (!secondNum) {
                $result.value = ''
            }
            secondNum += event.target.textContent
            $result.value += event.target.textContent

        }

        document.querySelector('#num-0').addEventListener('click', onClickNumber);
        document.querySelector('#num-1').addEventListener('click', onClickNumber);
        document.querySelector('#num-2').addEventListener('click', onClickNumber);
        document.querySelector('#num-3').addEventListener('click', onClickNumber);
        document.querySelector('#num-4').addEventListener('click', onClickNumber);
        document.querySelector('#num-5').addEventListener('click', onClickNumber);
        document.querySelector('#num-6').addEventListener('click', onClickNumber);
        document.querySelector('#num-7').addEventListener('click', onClickNumber);
        document.querySelector('#num-8').addEventListener('click', onClickNumber);
        document.querySelector('#num-9').addEventListener('click', onClickNumber);

        document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
        document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
        document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
        document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));

        document.querySelector('#calculate').addEventListener('click', () => {
            if (secondNum) {
                switch (operator) {
                    case '+': $result.value = parseInt(firstNum) + parseInt(secondNum); break;
                    case '-': $result.value = parseInt(firstNum) - parseInt(secondNum); break;
                    case '/': $result.value = parseInt(firstNum) / parseInt(secondNum); break;
                    case '*': $result.value = parseInt(firstNum) * parseInt(secondNum); break;
                }
                firstNum = $result.value
                secondNum = ''
                operator = ''
                $operator.value = ''

            }
        })

        document.querySelector('#clear').addEventListener('click', () => {
            firstNum = '';
            operator = '';
            secondNum = '';
            $operator.value = '';
            $result.value = '';
        });
    </script>
</body>

DOM 조작을 이용한 계산기 코드이다.
(=)버튼을 안누르고 연달아 수식 버튼을 누를시 자동으로 계산한 결과를 num1에 저장하는 기능을 추가했다. 코드를 짜며 고차함수 개념에 대해 알게됐다. eventlistener 함수에 매개변수 있을때 고차함수 사용하여 매개변수 값을 리턴 함수에 넣는다.