함수 중복 제거하기(고차함수)
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
document.querySelector('#num-0').addEventListener('click', () => {
if (operator) {
numTwo += '0';
} else {
numOne += '0';
}
});
document.querySelector('#num-1').addEventListener('click', () => {});
document.querySelector('#num-2').addEventListener('click', () => {});
document.querySelector('#num-3').addEventListener('click', () => {});
document.querySelector('#num-4').addEventListener('click', () => {});
document.querySelector('#num-5').addEventListener('click', () => {});
document.querySelector('#num-6').addEventListener('click', () => {});
document.querySelector('#num-7').addEventListener('click', () => {});
document.querySelector('#num-8').addEventListener('click', () => {});
document.querySelector('#num-9').addEventListener('click', () => {});
document.querySelector('#plus').addEventListener('click', () => {});
document.querySelector('#minus').addEventListener('click', () => {});
document.querySelector('#divide').addEventListener('click', () => {});
document.querySelector('#multiply').addEventListener('click', () => {});
document.querySelector('#calculate').addEventListener('click', () => {});
document.querySelector('#clear').addEventListener('click', () => {});
JavaScript
복사
•
클릭 시 이벤트 함수에서 매개 변수를 넘겨주기
◦
매개변수 사용 시 중복이 제거된다.
•
공통 사용 코드를 함수로 뺀다.
const onClickNumber = (number) => {
// return 을 따로 정의 하지 않으면 undefined를 리턴한다.
return () => { // 함수를 리턴하도록 함
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'));
.
.
JavaScript
복사
위에서 정의한 함수를 더 간단하게
const onClickNumber = (number) => () => { // 함수가 함수를 리턴한다
if (operator) { // 비어있지 않다
numTwo += number;
} else { // 비어있다
numOne += number;
}
$result.value += number;
}
}; // 고차 함수 (high order function)
JavaScript
복사
