[JavaScript]함수와 함수의 호출, 고차함수

함수의 호출은 리턴값으로 바로 대체한다.

const add = (a, b) => a + b;

function calculate(func, a, b) {
  return func(a, b);
}

add(3, 5);	// 8
calculate(add, 3, 5);	// 8
calculate(add(), 3, 5);	// Uncaught TypeError: func is not a function

calculate(add, 3, 5)와 같이 함수 자체를 인수로 전달한 경우 원하는 값이 나오는 반면 calculate(add(), 3, 5)처럼 호출값을 인수로 전달했을 때 호출값은 함수가 아니기 때문에 func(a, b)를 리턴하는 과정에서 에러가 발생하게 된다.

즉 calculate(add(), 3, 5)는 다음과 같이 생각하면 된다.

calculate(undefined + undefined, 3, 5);

add()처럼 함수의 호출이 인수로 전달되었을 때 그 리턴값을 미리 생각해보자.
우선, add() 함수 자체에 인수가 없기 때문에 a도 undefined가 되고 b도 undefined가 된다. 그리고 이 둘을 더하게 되면 NaN이 되고, NaN은 당연히 함수가 아니기 때문에 에러가 발생하게 되는 것이다.

이제 고차함수에 대해 생각해보자.

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

document.querySelector('#header').addEventListener('onclick', onClick());

마찬가지로 onClick() 부분을 리턴값으로 바꾸어 생각해보면

document.querySelector('#header').addEventListener('onclick', (event) => {
	console.log(event.target);
});

가 되고 이는 올바른 코드인 것을 눈으로 봐도 알 수 있다.
고차함수를 사용하면 onClick()처럼 함수의 호출값을 인수로 사용해도 정상적으로 작동한다는 것이다.

이 때 event의 위치도 생각해볼 여지가 있는데, 만약 (event) => () => {...}와 같이 event의 위치가 바뀌게 된다면 onClick()를 리턴값으로 바꾸는 과정에서 event가 undefined가 되고 event.target이 undefined.target이 되어 에러가 발생하게 될 것이다.