[JS] 함수와 함수 호출, 고차함수

아래는 기본적인 자바스크립트 코드이다.

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)

코드를 작성하다 보면 위의 코드와같이 함수자리에
함수 호출을 넣는 실수를 하는 경우가 있다.

다른 예제를 한번 보도록 해보자.

document.querySelecter('#header').addEventListener('click',add())

위의 코드는 Header에 onClick 이벤트를 추가하는 코드이다.
위와 같이 함수호출을 하게되면 클릭을 하지않아도 add 함수가 실행되게 된다.
이유는 함수호출은 add함수의 return 값을 가져오는것이기 때문이다.

함수 호출이 알맞게 쓰이는 예시를 한번 보도록 해보자

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

document.querySelecter('#header').addEventListener('click', onClick())

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

위의 예시와 같이 고차함수와 같은 경우에는 함수호출을 하게되면 알맞게 이벤트 기능을
추가할수 있게 된다.

참고

• Zerocho 인간 JS 엔진 되기