중복 코드 제거가 이렇게 쉬운데, 왜 어려운 고차 함수를 소개했을까요? 실무에서는 내부 코드가 모두 같은 함수보다 대부분 다 비슷한데 특정 부분만 다른 함수가 더 많기 때문입니다. 이럴 때는 고차 함수로 중복을 제거해야 합니다.
연산자 버튼을 누를 때도 고차 함수를 사용해 연산자를 저장할 수 있습니다. 고차 함수를 사용해야 하는 경우가 이렇게 바로 나오네요. 연산자 버튼에서는 연산자를 operator 변수에 저장하면서 화면($operator)에도 표시하고 있습니다.
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('*'));