함수와 함수호출, 고차함수에서의 호출

함수와 함수 선언, 함수 호출을 잘 구분해야 한다

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

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

add(3, 5); // 8
calculator(add, 3, 5); // 8
calculator(add(), 3, 5); // X

위 코드에서 calculator를 func, a, b를 매개변수로 가지는 함수로 선언하였다

이때 calculator는 add라는 함수와 a,b를 3, 5라는 정수 아규먼트로 받는다.

 

하지만 calculator의 func 매개변수 자리에 add라는 함수를 add() 호출해서 아규먼트로 넘겨주게 된다면 실제 전달되는 값은 함수가 아닌 그 함수의 리턴값이 된다 (함수 add는 매개변수 두개를 받고 그 두개를 더한 값을 리턴)

 

만약 typescript를 쓰면  쉽게 알아차릴 수 있지만 js만을 사용한다면 실제 아규먼트로 넘어오는 값을 실행하기 전까지 눈치채기 어렵다

 

따라서 만약 함수 호출하는 것을 봤다면 바로 return 값으로 대체해버리면 헷갈리지 않는다 ( 물론 머리로..)

document.querySelector("#header").addEventListener("click", add());

// const add = (a, b) => a + b;
// add의 리턴값으로 대체하기

document.querySelector("#header").addEventListener("click", undefined + undefined);



const onClick = () => () => {
  console.log("hello");
};

document.querySelector("#header").addEventListener("click", onClick());

//onClcik의 리턴값으로 대체하기

document.querySelector("#header").addEventListener("click", () => console.log("hello"));
// 화살표 함수의 리턴을 잘 파악해야 한다

 

고차함수도 마찬가지

함수가 다른 함수를 리턴하더라도 해당 함수가 리턴하는게 뭔지 보면서 파악해야 한다

const onClick = () => () => {
  console.log("hello");
};

// 만약 event 값을 넣어야한다면 어디로 넣어야할까?

document.querySelector("#header").addEventListener("click", onClick());

const onClick = () => () => {
  console.log("hello");
};

//대체해보면서 파악해본다

document.querySelector("#header").addEventListener("click", () => {
  console.log("hello");
});

// 따라서 event가 들어가야할 곳은 리턴되는 함수

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

 

결론

함수의 리턴값으로 대체해보면서 말이 되는지 안되는지 확인해봐라

 

https://www.youtube.com/watch?v=NS1cIsWlFGI&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3