[Javascript] 콜백함수

JS에서 지원되는 라이브러리는 대부분 콜백함수를 사용한다.

이 콜백함수는 함수 표현식을 응용한 것인데 간단한 예를 만들어보자.

 

function CALLBACK_choice(flag, callbackFunc1, callbackFunc2){
	if(flag = "fuck!"){
		callbackFunc1();
	}else{
		callbackFunc2();
	}
}

function angry(){
	console.log("ACTION :: MAD");
}

function sad(){
	console.log("ACTION :: CRY");
}

function happy(){
	console.log("ACTION :: WHISTLE");
}

function Funny(){
	console.log("ACTION :: LAUGH");
}

CALLBACK__choice("fuck!", angry, happy);

콜백함수는 위처럼 함수의 인자로 전달된 참조 함수를 일컫는데, 더 정확하게는 다른 함수의 인자로써 이용되는 함수나 어떤 이벤트에 의해 호출되어지는 함수를 말한다.

이와 동일한 개념으로 사용되는 C 콜백함수도 여럿 있다.

대표적으로 아래 함수가 해당되며 원형은 다음과 같다.

LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);

메시지 처리 함수인 WndProc은 메시지를 이용하여 어떠한 동작을 수행하는 프로시저라고 보면 된다.

여기서 프로시저와 함수를 굳이 구분지어 얘기한다면

값을 리턴하는데에 목적을 두지 않고 동작을 수행하는데에 목적을 둔 개념을 프로시저라 부르며,
구현부에서 이를 요리하여 결과를 도출하는데에 목적이 있을 때에는 이를 함수라고 부른다.

사설이 좀 섞였는데, 위 콜백함수 역시 윈도우가 만들어질 때 운영체제에 의해 호출되는 응용프로그램 내의 함수이므로 일종의 이벤트를 거친다고 볼 수 있다.
이 콜백함수가 빛을 발하는건 항상 이벤트와 함께 사용되는 순간인 것 같다.

자바스크립트에선 대표적으로 마우스 이벤트를 들 수 있으며 이 이벤트를 만드는 함수를 보면 두 번째 인자로 함수를 전달받는 것을 확인할 수 있다.

const EvCanvas = document.querySelector("canvas");

function onClick(event){
    console.log("click!");
}

EvCanvas.addEventListener("click", onClick);

이렇듯 콜백함수를 이용하면 조금 더 유연하게 사용자(프로그래머)가 원하는 동작을 할 수 있도록 만들 수 있다.