계산기

1. 고차함수로 중복 제거

• 중복 제거 시 함수를 사용한다. 함수에서는 달라지는 부분을 매개변수로 만들면 된다.

document.querySelector('#num-0').addEventListener('click', () => {
if (operator) {
      numTwo += '0';
    } else {
      numOne += '0';
    }
    $result.value += '0';
});

// 고차 함수 사용
const onClickNumber = (number) => () => {
  if (operator) {
      numTwo += number;
    } else {
      numOne += number;
    }
    $result.value += number;
});
document.querySelector('#num-0').addEventListener('click', (onClickNumber('0'));
                                                  
// 고차 함수
const 함수 = (매개변수) => () => {
  // return 생략한 형태
}

• 고차 함수(high order function): 함수가 함수를 리턴하는 함수. 함수를 만드는 함수
• 고차함수를 사용하지 않고 중복을 제거할 수도 있다.
  button 안에는 텍스트가 들어있기 때문에 event.target.textContent를 이용한다.

const onClickNumber = (event) => {
  if (operator) {
      numTwo += event.target.textContent;
    } else {
      numOne += event.target.textContent;
    }
    $result.value += event.target.textContent;
});
document.querySelector('#num-0').addEventListener('click', (onClickNumber);

2. 중첩 if 문 줄이기

• if 문이 여러 번 중첩될수록 코드 읽기가 점점 어려워지므로 피하는 것이 좋다.
• if 문 줄이는 방법
  1) if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.
  2) 분기점에서 짧은 절차부터 실행하게 if 문을 작성한다.
  3) 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for 문 내부의 경우)로 중단한다.
  4) else를 제거한다 (이때 중첩 하나가 제거된다).
  5) 다음 중첩된 분기점이 나오면 1~4의 과정을 반복한다.

3. 결과 계산하기

• 문자열끼리 더하게 되면 문자열을 나란히 정렬하게 되므로 parseInt를 사용하여 더해주어야 한다.
• 더하기 외의 사칙연산은 문자열을 계산해도 숫자로 인식하게 되므로 parseInt 생략 가능하다.
• eval 함수를 사용하게 되면 문자열을 숫자로 더할 수 있으나, 이는 해커가 악용할 가능성이 있기 때문에 실무에서는 사용하지 않는 것이 좋다.

4. Self-check

1. numOne에 음수 넣기

• 연산자 버튼 클릭 시 매개변수의 값이 -인지 확인하는 로직을 추가한다.
• numOne과 numTwo가 입력되지 않은 상태에서 $operation.value가 -1 일때의 로직을 추가한다.
  numOne의 값에 -1을 곱해주고 operator를 비운다.

2. 연달아 계산하기: = 버튼 누르지 않고 결과값 나타내기

• numTwo가 있고, 연산자 버튼을 클릭했을 때 계산하는 로직을 추가한다. (calculator에서 사용한 로직)

5. 코드 및 후기