함수와 함수호출의 차이

const add = (a,b) => a + b; // 함수의 선언

const ex = (a,v) => {a + b}; // 함수의 선언

function calculator (function, a , b) {
			return function(a,b)
    }; // 함수의 선언
    
let a = add(3,6) // 함수의 호출

let b = ex(3,6) // 함수의 호출

let c= calculator(add, 3,6) // 함수의 호출

console.log(a,b,c) 의 결과는 ?
a = 9
b = undefined
c = 9

위 예제에서 왜 b의 값은 undefined일까요 ?

바로 ex 함수가 함수의 바디만 있고 리턴을 따로 지정해주지 않아서,
리턴값이 없으면 함수는 자동으로 undefined를 리턴하기에 값이 이렇게 출력됩니다.

1. document.querySelector("#header").addEventListener("click", add()) 와
2. document.querySelector("#header").addEventListener("click", add)는 
엄청난 차이를 가져옵니다.

보통 1번 상황일 때, 클릭도 하지 않았는데 add라는 함수가 동작해요 !!
와 같은 실수를 범할때가 있을텐데,
이때 혼란스럽지 않으려면 함수를 호출한 걸 봤다 ?
그럼 그 함수의 리턴 값으로 함수를 대체해 보세요 !

1번을 변경해볼게요 !
1-1.  document.querySelector("#header").addEventListener("click", undefined + undefined)
=> 말이 안되죠 ?

2-1. document.querySelector("#header").addEventListener("click", (a,b) => a + b;)
=> 이렇게 되야 함수가 정상적으로 동작합니다 !

위와같은 상황은 쉽지만 고차함수로 갈 수록 조금 복잡해지는데요

const onClick = () = () => {
	console.log("I Will Be Human JavaScript Engine");
} 
위와 같은 경우라면 1번과 같이 코드를 작성해주셔야 리턴값이 정상적으로 들어갑니다.

document.querySelector("#header").addEventListener("click",() => {
	console.log("I Will Be Human JavaScript Engine");
}) 이 처럼이요 !

그래서 의식적인 연습을 통해 함수를 리턴문으로 변경하시는 연습을 머리속으로 할 수 있어야 합니다

const onClick = () = () => {
	console.log("I Will Be Human JavaScript Engine");
} 

const onClick = () => {
	return () => {
    	console.log("I Will Be Human JavaScript Engine");
    }
 }
 
 와 같이요 !
 

리액트 예제코드 !

import React,{useCallback} from 'react'

export default const App = () => {
	const onClick = useCallback((e) => {
    	console.log(e.target)
    },[])
	
  return (
  	 <div onClick={onClick}></div>
  )
  
  위와 같이 onClick함수의 리턴 값은 onClick={(e) => {
    	console.log(e.target)
    }} 
   이므로 정상적으로 동작하지만 만약
    
  return (
  	 <div onClick={onClick()}></div>
  )
  으로 작성한다면, 
  onClick={undefined} 이므로 event가 매개변수로 들어오지 않고,
  e가 undefined 이기에 에러가 납니다
}