콜백함수(Callback Function)

• 예제) MDN - Array.prototype.map() 설명 보신 적 있으시죠?

  arr.map(**callback**(currentValue[, index[, array]])[, thisArg])
  

• 여러 라이브러리에서 콜백함수인 경우, callback 또는 cb, callbackFn 등등 으로 표기

정의

• 함수의 매개변수가 함수일 때, 매개변수로 받은 함수를 콜백함수르고 부른다. 끝 -!
• 고차 함수(Higher Order Function): 매개변수를 함수로 받은 함수. 즉, 외부에서 콜백함수를 전달받은 함수
  • 아래에서 showMessage, Array.map 등
  • 고차 컴포넌트 Higher Order Component(HOC) 들어보셨나요? 컴포넌트를 매개변수로받아서, 컴포넌트를 반환하는 컴포넌트~~
• 잠깐 일급함수에 대해 알고 넘어갈게요.

사용

// closeFn가 바로 콜백함수!
// closeFn가 비동기로 쓰인건 아닙니다. (sync callback - 동기 콜백)
function showMessage(msg, closeFn) {
	// 로직로직~~
	
	closeFn(true);
}

// map 함수의 인자인 el => el*2 함수가 콜백함수!
// 얘도 비동기 아닙니다. (sync callback)
[1,2,3].map(el => el*2);

// addEventListener의 두 번째 인자도 콜백함수!
// 얘가 바로~ 비동기로 동작! (async callback)
window.addEventListener('keydown', e => {
	// 로직
});

// setTimeout 함수에 넘긴 익명함수가 콜백함수!
// Hello 또한 3초뒤에 나오죠. 비동기 동작! (async callback)
setTimeout(function(){ 
	alert("Hello"); 
}, 3000);