인간 JS되기 강의 1

// 함수의 호출값은 return 값으로 대체하여 사고하면 고차함수에 대한 이해가 쉽다.

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

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

console.log(add(3, 5)); // 8

// document.querySelector('h1').addEventListener('click', add());
// add() 함수를 호출하면 바로 실행되므로 반환된 값이 아닌 add 함수 자체를 넘겨야 한다.
// 즉, 함수 호출 값은 return 값으로 대체하여 사고하면 쉽다.
// 즉, add()는 undefined + undefined가 되므로 NaN이 된다.

document.querySelector('h1').addEventListener('click', add());

// onClick 함수의 return 값은 () => console.log('Hello') 이다.
// () => console.log('Hello')는 함수이다.
// 따라서 onClick()이더라도 함수가 바로 실행되지는 않는다.
// onClick2는 onClick과 같은 기능을 하는 함수이나 return을 생략하지 않은 형태이다.
// 이번에도 onClick()과 onClick2()는 함수이므로 함수가 바로 실행되지는 않는다.
// 즉, return 값으로 대체하여 사고하면 쉽다.

const onClick = () => () => console.log('Hello');
const onClick2 = () => {
  return () => console.log('Hello');
};
document.querySelector('h1').addEventListener('click', onClick());
document.querySelector('h1').addEventListener('click', onClick2());