const onClickNumber = (number) => () => {
if (operator) {
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
};
document.querySelector('#num-0').addEventListener('click', onClickNumber('0'));
document.querySelector('#num-1').addEventListener('click', onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click', onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click', onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click', onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click', onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click', onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click', onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click', onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click', onClickNumber('9'));
물론 고차 함수를 사용하지 않고도 중복을 제거할 수 있습니다. 앞의 코드에서 고차 함수를 사용한 이유가 뭐였죠? onClickNumber() 함수 내부의 다른 코드는 똑같은데 0~9라는 숫자만 다르기 때문입니다. 숫자를 같게 만든다면 모든 코드가 똑같아지므로 쉽게 중복을 제거할 수 있습니다.