계산기-고차함수,함수중복제거, 코드줄이기

자바스크립트/인프런강의-렛츠기릿 자바스크립트

계산기-고차함수,함수중복제거, 코드줄이기

샐님 2023. 7. 4. 12:52

728x90

1. 순서도 그리기

2. 함수의 중복제거

let numOne = '';

let operator = '';

let numTwo = '';

const $operator = document.querySelector('#operator');

const $result = document.querySelector('#result');

document.querySelector('#num-0').addEventListener('click', OnClickNumer2 ('1'));

const OnClickNumer2 = (number) => {

if (number) {

} else {

}

//return undefined 가 생략되어 사실상 document.querySelector('#num-0').addEventListener('click', undefined); 와 동일

}

1) return 값을 함수로 넣어줄수있다.

const OnClickNumer2 = (number) => {

//return 값을 함수로 넣어줄수있다.

return () => {

if (number) {

} else {

}

2) 함수가 함수를 return 하는 것을 고차함수 라고 한다. (high order function)

//화살표 함수는 () 중괄호와 return 이 만나면 생략가능하다.

const OnClickNumer2 = (number) => () => {

if (number) {

} else {

}

3. if 문 중복제거

1) 공통된 절차를 각 분기점 내부에 넣는다.

2) 분기점에서 짧은 절차부터 실행하게 if문을 작성한다.

3) 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.

4) else를 제거한다(이때 중첨 하나가 제거된다)

5) 다음 분기점이 나오면 1~4를 반복한다.

const onClickNumber01 = (event) => {

if (operator) { // 비어있지않다.

if (!numTwo) {

$result.value = '';

}

numTwo += event.target.textContent;

$result.value += event.target.textContent; //공통된거 if문에 넣기

} else {

numOne += event.target.textContent;

$result.value += event.target.textContent; //공통된거 if문에 넣기

}

};

// 짧은 분기절차를 위로 옮김

const onClickNumber01 = (event) => {

if (!operator) { // 비어있지않다.

numOne += event.target.textContent;

$result.value += event.target.textContent;

} else { //비어있다

if (!numTwo) {

$result.value = '';

}

numTwo += event.target.textContent;

$result.value += event.target.textContent;

}

};

// return 을 사용하고 else 삭제

const onClickNumber01 = (event) => {

if (!operator) { // 비어있지않다.

numOne += event.target.textContent;

$result.value += event.target.textContent;

return;

}

if (!numTwo) {

$result.value = '';

}

numTwo += event.target.textContent;

$result.value += event.target.textContent;

};

4.전체 코드

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>계산기</title>
    <style>
        * {
            box-sizing: border-box
        }
        
        #result {
            width: 180px;
            height: 50px;
            margin: 5px;
            text-align: right
        }
        
        #operator {
            width: 50px;
            height: 50px;
            margin: 5px;
            text-align: center
        }
        
        button {
            width: 50px;
            height: 50px;
            margin: 5px
        }
    </style>
</head>

<!-- 계산기 버튼 구현 -->

<body>
    <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 numOne = '';
        let operator = '';
        let numTwo = '';
        const $operator = document.querySelector('#operator');
        const $result = document.querySelector('#result');
        const onClickNumber = (event) => {
            console.log("!operator", !operator)
            if (!operator) { // 비어있다 operator = '' 이면 !operator 는 값이 있는지에대한 물음이니까 true
                numOne += event.target.textContent;
                $result.value += event.target.textContent;
                return;
            }
            // 비어있지 않다
            if (!numTwo) {
                $result.value = '';
            }
            numTwo += 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);

        const onClickOperator = (op) => () => {
            if (numOne) {
                operator = op;
                $operator.value = op;
            } else {
                alert('숫자를 먼저 입력하세요.');
            }
        }



        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 (numTwo) {
                switch (operator) {
                    case '+':
                        $result.value = parseInt(numOne) + parseInt(numTwo);
                        break;
                    case '-':
                        $result.value = numOne - numTwo;
                        break;
                    case '*':
                        $result.value = numOne * numTwo;
                        break;
                    case '/':
                        $result.value = numOne / numTwo;
                        break;
                    default:
                        break;
                }
            } else {
                alert('숫자를 먼저 입력하세요.');
            }
        });



        document.querySelector('#clear').addEventListener('click', () => {
            numOne = '';
            operator = '';
            numTwo = '';
            $operator.value = '';
            $result.value = '';
        });





        function test() {
            let result = '';
            if (!a) {
                result = 'a';
                result += 'b';
                return result;
            }
            if (!b) {
                result = 'c';
            }
            result += 'b';
            return result;

        }
    </script>
</body>

728x90