중복 제거하기

코드를 짜면서 반복작업을 하는 경우가 있습니다.

document.querySelector('#num-7').addEventListener('click', () => {
      if (operator) {
        numTwo = numTwo + '7'; // 비어있지 않다
      } else {
        numOne = numOne + '7'; // 비어있다
      };
    });
    document.querySelector('#num-8').addEventListener('click', () => {
      if (operator) {
        numTwo = numTwo + '8'; // 비어있지 않다
      } else {
        numOne = numOne + '8'; // 비어있다
      };
    });
    document.querySelector('#num-9').addEventListener('click', () => {
      if (operator) {
        numTwo = numTwo + '9'; // 비어있지 않다
      } else {
        numOne = numOne + '9'; // 비어있다
      };
    });

이런식으로 코드가 중복이 있는 경우인데요.

중복되는 부분은 함수로 만들고
달라지는 부분은 매개변수로 만들면 됩니다.

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

이런식으로 (number)를 넣어서 매개변수로 넣어줍니다.
이제 이걸 변수로 빼줘야 하는데요.

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

새로이 변수를 만들어서 선언하고

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

이런식으로 넣어줍니다.
그런데 여기서 또 오류가 생깁니다.
return값을 받을 때 return이 비어있어서 undefined로 값을 가져오는데요.

이럴 때는 선언했던 onClickNumber를 수정해줘야 합니다.

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

return을 먼저 선언하고, 화살표 함수 안에 내용을 넣어줘야 return 값을 받아올 수 있습니다.

onClickNumber 옆에 숫자(0, 1 등) 넣는 이유

document.querySelector('#num-0').addEventListener('click', onClickNumber('0'));
#num-0을 선언할 때 이렇게 선언했는데요.

onClickNumber 옆에 '0'을 넣는 이유는 0을 넣으면 number에 0이 들어갑니다.
1을 넣으면 number에 1이 들어갑니다.

if (operator) {
	numTwo = numTwo + number; // <- 여기에 0, 1 등 숫자 들어감
} else {
	numOne = numOne + number; // <- 여기에 숫자 들어감
}
$result.value = $result.value + number; // <- 여기에도 number에 숫자 들어감

그래서 number에 숫자가 따라옵니다.

고차함수

함수안에 함수를 리턴하는 걸 고차함수라 합니다.
위의 코드에서 더 줄일 수가 있습니다.

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

return을 없애고 (number) => () => {}; 처리를 하였는데요.
이걸 고차함수(high order function)이라 합니다.

함수 안에 함수라는 뜻입니다. () => () => {}; 순서입니다.