javascript 콜백이 아닌 함수 콜백으로 만들기

콜백 API를 엄청나게 사용하고 있는 요즘, 아래와 같은 구조의 javascript가 있다고 가정했을 때 문제가 생긴다.

function play(){
	var result = A('a');
    console.log(result);
}

function A(str){
	str = B(str);
    return str;
}

function B(str){
      str.callbackFunc(function(data){
            str = data;
 	 });
    return str;
}

버튼을 누르면 play()를 동작하게 하는 함수를 짰다고 쳤을 때, play()는 A에 'a'를 인자로 하여 실행하여 result에 담은 뒤, result를 출력한다. A(str)은 단순히 B(str)을 실행해 다시 str에 넣어주고, 그 값을 리턴한다. B(str)은 str을 어떠한 콜백이 있는 API를 사용하여 받은 값 data로 치환한 뒤 리턴한다. 

즉, 쉽게 얘기해서 play에서 던진 a라는 값은 B함수에 있는 callbackFunc이라는 API를 통해 별도의 값으로 변경되고 이를 A로 리턴하고 A는 play로 리턴해서 콘솔에 찍어주는 소스라는 뜻이다. callbackFunc라는 함수가 별도 서버와 통신해서 영문을 한국어 발음으로 변경하는 소스라고 했을 때 콘솔에 찍힌 result는 어떤 값일까?

예상은 '에이'가 찍히는 것이겠지만 실제로는 'a'가 찍힌다. 그 이유는 무엇일까? 바로 B에서 실행한 콜백함수가 끝나기 전에 리턴을 던지고, A역시 바로 리턴을 던졌기 때문이다. 이를 수정하기 위해서는 B의 콜백함수 안으로 return을 옮기던가 아니면 B함수를 콜백함수로 변경해주어야 한다.

return을 B의 콜백함수 안으로 옮기는 것이 가장 편하겠지만, 실제로는 그렇게 하지 못하는 상황이 자주 발생한다. 그 이후 로직이 방대하여 별도로 빼기 어렵다거나 유지보수를 하면서 소스를 크게 손 댈 수 없는 상황일 때 주로 이런 경우가 발생한다. 따라서 이럴 때는 B를 불가피하게 콜백함수로 변경해주어야 한다.

javascript에서 콜백함수가 아닌 함수를 콜백함수로 변경해주는 방법은 매우 간단하다. 방법은 아래와 같다. 

function 함수(인자, goCallback){

	//처리 코드가 들어갈 자리 

    if(goCallback && jQuery.isFunction(goCallback)) {
    	goCallback();
    }
}


함수(인자, function(){
	//함수 실행 후 처리가 들어갈 자리
});

위와 같은 형태로 써준다면 두번째 인자가 함수라면 콜백을 실행하게 된다. 간단한 방법으로 콜백 함수를 만들 수 있는 셈이다.