[JS] 함수와 함수의 호출의 차이 (고차함수)

함수

많은 사람들이 착각을 하는 것은 바로 함수를 넣는 자리에 함수가 아닌 함수 호출을 넣고는 자신을 클릭을 하지 않았는데 함수가 호출 된다고 말하는 것

Ex) add() 같은 경우

"앞으로 함수를 호출하는 부분을 봤다면 리턴 값으로 생각하면 됨"

코드의 10번째 줄에 add() 같은 경우 undefined + undefined 라고 생각하면 됨 (아직 매개변수를 전달하지 않았으니)

// 고차함수
const onClick = () => () => {
	console.log("안녕")
}

같은 경우에 항상 생각해야 하는 것. () => 는 return { }

const onClick = () => {
	return () => {
    	console.log('안녕')
    }
}

과 동일하단 것을 알아야함

고차함수 : 함수 안에서 다른 함수를 리턴하는 것

만약 여러겹의 고차함수를 봤을 때 이벤트를 어디에 넣어줄까?

const onClick = () => () => () => {
	console.log("안녕")
}

이럴 때도 마찬가지로 
저 함수에 리턴값에 대해 생각을 해보면 됨 

// case #1
const onClick = (event) => () => {
	console.log("안녕")
} 
의 리턴 값
document.querySlector("#header").addEventListener('click', () => { 
	console.log('hello') 
});

즉, 이러한 케이스는 우리가 전달한 event가 반환값에 포함되지 않으므로 
저 자리는 잘못된 자리라는 것을 알 수 있음 

그렇기에 

const onClick = () => (event) => {
	console.log("안녕")
} 

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

이것이 맞는 값. 

React 적용 예제

import { useCallback } from 'react';

export const App () => {
	const onClick = useCallback( (e) => {
    	console.log(e.target);
    }, []);
    
    return ( 
    	<div onClick={onClick}> </div>
    )
}

// *여기서 useCallback은 아무런 의미가 없지만 실무일 때를 대비하여 삽입한 것 
동일 코드 : 
export const App () => {
	const onClick = (e) => {
    	console.log(e.target);
    };

그래서 우리는 호출 할 때

<div onClick={ onClick() }> 을 넣었다는 것은

onClick 함수의 return값인 undefined를 넣었다는 것과 같은 말

그렇기에 e에는 undefined가 들어가고
e.target에는 'can not find property 에러'가 발생하게 되는 것

하지만 고차함수를 적용 한다면?

원래 useCallback에서는 고차함수를 잘 안 쓰긴 함

	const onClick = useCallback( () => (e) => {
  	console.log(e.target);
  }, []);
  
  이렇게 된다면 우리는 
  
<div onClick={(e) => {
  	console.log(e.target);
  }
 }> 를 넣은 것과 마찬가지이기 때문에 가능한 코드가 됨

결론

함수의 선언과 함수의 호출을 구분해야 할 줄 알아야하고
함수의 호출에 대해 질문을 받았다면, "함수의 호출은 곧 함수의 리턴값으로 대체할 수 있다." 고 말하면 된다.