함수가 함수를 리턴하는 함수를 고차 함수(high order function)이라고 부릅니다.
사용하는 이유는 코드의 가독성이라고 생각합니다.
https://velog.io/@jakeseo_me/자바스크립트-개발자라면-알아야-할-33가지-개념-22-자바스크립트-자바스크립트-고차-함수Higher-Order-Function-이해하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="text" 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>
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
let numOne = '', numTwo = '', operator = '';
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 && op === '-') {
numOne += op;
$result.value = op;
} else {
if(numOne && !operator) {
operator = op;
$operator.value = op;
} else if(!numTwo) {
numTwo += op;
$result.value = op;
} else {
alert('x');
}
}
};
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;
}
numOne = $result.value;
numTwo = '';
$operator.value = '';
operator = '';
}
else {
alert('숫자를 먼저 입력하세요.');
}
});
document.querySelector('#clear').addEventListener('click', () => {
numOne = '';
numTwo = '';
operator = '';
$result.value = '';
$operator.value = '';
});
</script>
</body>
</html>
노력하며 살려고 노력하는 사람