함수 호출한 것을 보면, 그 자리에 return한 값을 대체해보자.

함수 선언 방법 중에는 다음과 같이 화살표 함수 방식이 있다.

중괄호를 생략하면 return이 포함되어 있다.

주의해야 할 점은, 객체를 return할 때는 꼭 소괄호로 감싸줘야 한다. js 엔진은 중괄호를 return이 아닌 함수의 몸체로 보기 때문이다.

// 아래 세 개는 같은 표현
const add = (a,b) => { 
  return a + b 
};
const add = (a,b) => a+b;
const add = (a,b) => (a+b);

// 객체를 리턴할 땐 꼭 소괄호로 감싸줘야 함
const add = (a,b) => ({a + b})

 

함수를 호출할 때, 매개변수에 함수를 넣는다면 주의해야 할 점이 있다. 

함수이름 뒤에 () 를 붙으면 함수 호출이 된다는 것이다.

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

function calculator(func, a, b){ // 여담: 매개변수만 봐서는 이 함수가 무슨 역할인지 모른다.(ts는 알 수 있지만)
  return func(a,b);
}

add(3, 5); // 8
calculator(add, 3, 5); // 8, 매개변수로 add()로 넣으면 안됨. 이는 함수 호출이므로 undfined가 오게 됨

 

만약 함수 호출한 것을 보면, 그 자리에 return한 값을 대체해보자.

 

// 잘못된 코드
const onClick = () => { 
  console.log("hello");
}

document.querySelector("#header").addEventListner("click", onClick()); // undefined

 

고차함수의 경우 위 경우가 성립될 수 있다. (고차함수는 함수 안에서 다른 함수를 리턴하는 함수다.)

// 올바른 코드
const onClick = () => () => { 
  console.log("hello");
}

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

초보자의 입장에서는 아래와 같이 고차함수를 풀어서 보면 이해가 잘 될 것이다.

익숙해질 때 까지 풀어서 보는게 나을 것 같다.

// 위 고차함수를 푼 모습
const onClick = () => { 
	return () => {  
		console.log("hello");
	}
}

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

앞서 말했듯이, 함수 호출이 있으면 return값으로 대체해보자. 물론 실제로 코드를 대체해보는 게 아닌, 머릿속으로 대체해 보는 것이다. 

// 헷갈릴 땐 함수 호출을 리턴값으로 대체해보기
const onClick = () => { 
	return () => {  
		console.log("hello");
	}
}

document.querySelector("#header").addEventListner("click", () => {
		console.log("hello");
}); 
// 물론 실제로가 아니라 머릿속으로 대체해야함

 

만약 고차함수에서 이벤트 매개변수 값을 넣어야 하는 상황인데, 어디에 넣어야 할 지 모르겠으면, 위치 대입을 통해 어디에 위치해야하는지 유추해보면 된다.

// 잘못된 위치 
const onClick = (event) => () => { 
		console.log("hello");
}

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

// 올바른 위치 
const onClick = () => (event) => { 
		console.log("hello");
}

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

 

 

 

 

참고: 제로초 '인간 JS 엔진되기' 강좌를 보고 정리한 글입니다.