고차 함수를 이용하여 함수의 중복을 없애주었다.
그리고 동작을 해봤는데 3 + 4 가 입력되면, 사진처럼 34가 찍히는 것을 볼 수 있었다.
이 과정에서 if문이 중첩이 된다.
<script>
if (operator) {
if (!numTwo) { // numTwo가 처음 클릭하는 화면에서는 화면을 지우기
$result.value = '';
}
numTwo += number;
} else {
numOne += number;
}
$result.value += event.target.textContent;
</script>
if문이 중첩되면 점점 더 읽기 어려워지므로, if문 중첩을 피하는 방법에 대해 공부했다.
위 절차를 따라 if문을 지워보겠다.
기존 코드 :
<script>
if (operator) {
if (!numTwo) { // numTwo가 처음 클릭하는 화면에서는 화면을 지우기
$result.value = '';
}
numTwo += number;
} else {
numOne += number;
}
$result.value += event.target.textContent;
</script>
<script>
if (operator) {
if (!numTwo) {
$result.value = '';
}
numTwo += number;
$result.value += event.target.textContent;
} else {
numOne += number;
$result.value += event.target.textContent;
}
</script>
위 코드에서는 if문 안에 if문과 else문이 있는 구조인데. else문이 처음 if문과의 분기점이 짧으므 처음 if문의 조건에 not(!)을 붙여 짧은 절차부터 실행하게 만든다.
<script>
if (!operator) {
numOne += number;
$result.value += event.target.textContent;
} else {
if (!numTwo) {
$result.value += '';
}
numTwo += number;
$result.value = event.target.textContent;
}
</script>
우리는 함수 내부의 경우이니 return을 추가하여 중단한다.
<script>
if (!operator) {
numOne += number;
$result.value += event.target.textContent;
return;
} else {
if (!numTwo) {
$result.value += '';
}
numTwo += number;
$result.value = event.target.textContent;
}
</script>
return이 나오면 else가 필요없으니, else를 지워준다.
그래서 if문안에 if문이 들어있는 코드가 없어진다.
<script>
if (!operator) {
numOne += number;
$result.value += event.target.textContent;
return;
}
if (!numTwo) {
$result.value += '';
}
numTwo += number;
$result.value = event.target.textContent;
</script>