계산기

Script 작성

...
<script>
	let numOne = ''; // 첫번째 입력 값
    let operator = ''; // 사칙연산 입력 값
    let numTwo = ''; // 두번째 입력 값
    
    const $operator = document.querySelector('#operator')
    const $result = document.querySelector('#result')
    
    document.querySelector('#num-0').addEventListener('click', () => {
    	if (operator) { //비어있지 않다.
        	numTwo += 0;
        } else {
        	numOne += 0;
        }
        $result.value += '0';
    });
</script>

우선 변수들을 할당해주었으며, 할당 부분의 영역까지 선언하였다.

그리고 숫자를 눌렀을 때, 일어나는 이벤트들의 함수를 작성하는 부분인데
0부터 9까지 그리고 사칙연산에 해당되는 것들도 만들어주어야 한다.

만드는 코드가 중복되는 부분이 있는데, document.querySelector('#num-0') 부분이다.
이 부분을 0 ~ 9 까지 중복하여 작성해야하지만, 고차함수를 사용하면 중복 작성을 최소화할 수 잇다고 배웠다.

고차함수

함수가 함수를 리턴하는 형태를 고차함수라고 한다.

고차함수를 만들기 위해서는 위의 중복되는 함수를 따로 빼주어 변수에 저장한다.

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

위처럼 함수 리턴 값 뒤에 또 함수를 넣어 중복되는 함수를 최소화할 수 있다.

그리고 중괄호와 return은 생략이 가능하기 때문에, 코드를 수정하여 다시 정리한다.

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

고차함수 편하게 사용하기

func 함수를 호출하면, func 함수에 넣은 매개변수를 console.log 하는 함수가 반환된다.

<script>
	const func = (msg) => {
  		return () => {
        	console.log(msg);
        };
    };
    
    const innerFunc1 = func('hello');
    const innerFunc2 = func('javascript);
    const innerFunc3 = func();
    
    innerFunc1();
    >>> hello
    innerFunc2();
    >>> javascript
    innerFunc3();
    >>> Undefined
</script>

마찬가지로 func 함수 호출 부분을 return 값으로 대체해 보면 이해가된다.

func 처럼 함수를 만들어내는 함수를 '고차함수'라고 한다.

TEST

first, second, third 가 어떤 반환값을 가지는지 확인해보기

<script>
  const hof = (a) => (b) => (c) => {
      return a + (b * c);
  };

  const first = hof(3);
  const second = first(4);
  const third = second(5);

  consolg.log(third)
  >>> 23
</script>

반환 값 하나하나 살펴보기

<script>
  // first
  (b) => (c) => {
      return 3 + (b * c);
  }

  // second
  (c) => {
      return 3 + (4 * c);
  }

  // third
  3 + (4 * 5)
</script>