1. HTML 세팅하기

2. 함수 중복 제거 [방법 1: 고차함수 (함수가 함수를 리턴)]

[1. 처음 코드]

const onClickNumber = (number) => {
      if(operator) {
        numTwo += number;
      } else {
        numOne += number;
      }
   $result.value += number;
};

document.querySelector('#num-0').addEventListener('click', onClickNumber(0))

• addEventListener('행동', '함수')이기 때문에 괄호의 두번째 칸에 오는 것이 함수여야 한다. 따라서 return 을 정의하지 않으면 undefined 를 반환 한다.

[2. 리턴에 함수를 추가한 코드]

const onClickNumber = (number) => { 
        if(operator) {
        numTwo += number;
      } else {
        numOne += number;
      }
      $result.value += number;
      return () => {
		 }
   };

document.querySelector('#num-0').addEventListener('click', onClickNumber(0));

• 이제 addEventListener 는 문제 없이 돌아가지만 함수 부분에서 아무런 일도 하지 않는다. 따라서 동작이 서술된 if문 이하를 리턴 함수 내부에 넣도록 한다.

[3. 완성 코드]

const onClickNumber = (number) => () => {
		if(operator) {
        numTwo += number;
      } else {
        numOne += number;
      }
      $result.value += number;
	}
};

document.querySelector('#num-0').addEventListener('click', onClickNumber(0));

• if문 이하를 리턴함수 내부에 넣고 난 후, 중괄호와 return 이 함께 쓰였기에 생략한다. 결국 화살표가 2개인 형태로 남게 된다.

3. 함수 중복 제거 [방법 2: event.target.textContent]