event

event는 브라우저가 넣어주는 겁니다.

예를 들어서

const a = (event) => {}; 
document.querySelector('#num-0').addEventListener('click', a);

여기서 event가 갑자기 어디서 생기냐는 겁니다.

const a = (event) => { console.log(event.target.value)};

그러니까 addEventListener를 'click'하면 a함수가 실행이 됩니다.
그러면 이 a라는 함수는 누가 실행을 해주냐?는 겁니다.

이거는 브라우저가 몰래 a(); 를 실행해줍니다.
그러면서 a(event);도 브라우저가 같이 넣어줍니다. a(event) 객체를 만들어서

const a = (event) <- 이런식으로 넣어줍니다.

그래서 'click'을 했을 때 a(event)를 인수로 넣어줘서 매개변수로 전달이 되는 겁니다.

고차함수 기본

const innerFunc = func();
innerFunc(); // innerFunc는 func의 리턴 값이죠.

const func = () => {
	return () => {
    	console.log('Hello');
    };
};

함수를 두번 연달아 호출하는 걸 고차함수라 합니다.

const func = (msg) => {
	return () => {
    	console.log(msg);
    };
};

여기서 msg는 매개변수입니다.
전에 중복 제거할 때 (number)로 넣었었는데 이번엔 msg로 넣은 겁니다.

const innerFunc1 = () => {
	console.log('Hello');
};
const innerFunc2 = () => {
	console.log('JavaScript');
};
const innerFunc3 = () => {
	console.log(); // 빈 값은 undefined
};

innerFunc1(); // 결과 값 Hello
innerFunc2(); // 결과 값 JavaScript
innerFunc3(); // 결과 값 undefined

그래서 위의 내용을 해보면

이렇게 나옵니다.

고차함수 쓰는 이유

함수와의 중복을 제거하기 위해 고차함수를 사용합니다.

const func = (msg) => {
	return () => {
    	console.log(msg);
    };
};

이걸 줄인게

const func = (msg) => () => {
	console.log(msg);
};

이겁니다.

{ 와 return이 생략되어서 줄여서 사용할 수 있습니다.

고차함수 안쓰고도 중복 제거하는 법

버튼 안에 textContent가 들어 있는데요.

const onClickNumber = (event) => {
	if (operator) { // 비어있지 않다
    	numTwo = numTwo + event.target.textContent;
    } else { // 비어있다
    	numOne = numOne + event.target.textContent;
    };
    $result.value = $result.value + event.target.textContent;
};

document.querySelector('#num-0').addEventListener('click, onClickNumber);
document.querySelector('#num-1').addEventListener('click, onClickNumber);
document.querySelector('#num-2').addEventListener('click, onClickNumber);
document.querySelector('#num-3').addEventListener('click, onClickNumber);
document.querySelector('#num-4').addEventListener('click, onClickNumber);
document.querySelector('#num-5').addEventListener('click, onClickNumber);
document.querySelector('#num-6').addEventListener('click, onClickNumber);
document.querySelector('#num-7').addEventListener('click, onClickNumber);
document.querySelector('#num-8').addEventListener('click, onClickNumber);
document.querySelector('#num-9').addEventListener('click, onClickNumber);

이런식으로 textContent를 사용해 중복을 제거할 수 있습니다.
참고로 textContent는 문자열입니다.

const onClickOperator = (op) => {
    if (numOne) {
       	operator = op;
        $operator.value = op;
    } else {
		alert('숫자를 입력하세요');
    }
}

그래서 전체 소스는

  let numOne = '';
  let operator = '';
  let numTwo = '';
  const $operator = document.querySelector('#operator');
  const $result = document.querySelector('#result');
  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);
  document.querySelector('#num-1').addEventListener('click', onClickNumber);
  document.querySelector('#num-2').addEventListener('click', onClickNumber);
  document.querySelector('#num-3').addEventListener('click', onClickNumber);
  document.querySelector('#num-4').addEventListener('click', onClickNumber);
  document.querySelector('#num-5').addEventListener('click', onClickNumber);
  document.querySelector('#num-6').addEventListener('click', onClickNumber);
  document.querySelector('#num-7').addEventListener('click', onClickNumber);
  document.querySelector('#num-8').addEventListener('click', onClickNumber);
  document.querySelector('#num-9').addEventListener('click', onClickNumber);
  const onClickOperator = (op) => () => {
    if (numOne) {
      operator = op;
      $operator.value = op;
    } else {
      alert('숫자를 입력하세요');
    };
  };
  document.querySelector('#plus').addEventListener('click', onClickOperator('+'));
  document.querySelector('#minus').addEventListener('click', onClickOperator('-'));
  document.querySelector('#divide').addEventListener('click', onClickOperator('/'));
  document.querySelector('#multiply').addEventListener('click', onClickOperator('*'));
  // document.querySelector('#calculate').addEventListener('click', onClickOperator(''));
  // document.querySelector('#clear').addEventListener('click', onClickOperator(''));

요렇습니다.
코드 실행하면 첫번째 숫자 클릭 -> 사칙연산 -> 두번째 숫자 클릭
이 상황에서 두번째 숫자 누르면 첫번째 숫자가 클리어가 되지 않는 상태입니다.

이 코드를 차차 잡아보도록 하겠습니다.

퀴즈

다음 코드의 console.log 결과를 맞춰보세요.

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

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

console.log(third);

이러면 third의 값은 뭘까요?

고차함수 (함수 안에 함수) 로 보면

a는 (b) => (c) => {
	return a + (b * c);
}

first는 안에 들어있는 위의 내용을 담은 것이고
second는 그 안에 있는

(c) => {
	return a + (b * c);
}

그니까 (a) 속에 (b) 속에 (c)를 보여줍니다.

first는 감싸는 코드
second도 감싸는 코드
c가 실행하는 내부 코드입니다.