1. 고차 함수 사용하기
✨ 함수를 반환할 때마다 반환 함수를 생성하는 함수를 고차 함수(high order function)라고 한다.
＊ 반환하는 값을 바꾸고 싶을 때는 매개변수를 사용한다.
＊ { 와 return을 생략할 수 있다.
🚀 먼저 계산기는 버튼을 클릭하여 계산을 하는 장치이다. 따라서 클릭 이벤트가 많이 발생한다. 그리하여 각 버튼에 이벤트 리스너를 달아야 하는데, 숫자버튼에서 실행할 함수의 경우엔, 숫자를 제외한 나머지 내용은 다 똑같다. 그리하여 중복된 함수를 없애고자 고차함수로 만든 후 숫자를 매개변수로 넘겨줄 수도 있지만, 브라우저가 함수를 실행하면서 인수로 event를 넣어준다는 점을 이용해 고차함수가 아닌 일반함수에 event.target.textContent를 사용하여 값을 변경해보자.
연산자버튼에서 고차함수를 사용해보도록 하자.
2. if문 중첩 제거하기
✨ if문이 중첩되면 코드를 파악하기가 어려우므로, if문의 중첩을 제거하는 방법을 알아보자.
＊ 1 ) 공통된 절차를 각 분기점(if & else) 내부에 넣는다.
＊ 2 ) 분기점에서 짧은 절차부터 실행하게 if문을 작성한다.(순서 변경)
＊ 3 ) 짧은 절차가 끝나면 return(함수 내부일 경우)이나 break(for문 내부의 경우)로 중단한다.
＊ 4 ) else를 제거한다.
🎁 추가 개념
＊ 문자열일 경우, 덧셈은 숫자로 바꿔서 계산을 해야 하지만, 빼기/곱셈/나누기는 숫자타입으로 바꿀 필요없이 바로 하면 된다.
＊ 자바스크립트 변수에만 데이터만 바꿔선 안되고, 동시에 화면에 표시되는 데이터도 바꿔줘야 한다.
🌟 완성
<!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) => { 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; }; 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 = ''; }); </script> </body>
아자아자 파이띵굥!