[JavaScript] 콜백함수(Callback Function)와 비동기 처리

콜백 함수(Callback Function)

 

 콜백 함수란, 특정 함수에게 자신의 제어권을 넘겨준 함수로써 제어권을 받은 함수가 콜백 함수의 처리 시기, 처리 방법등을 정의한다. 콜백 함수는 사용자가 함수를 실행하는 것이 아닌, 다른 함수가 함수를 실행한다는 점에 특징적이다.

 

 콜백 함수에 대해 이해하기 위해 콜백함수를 인자로 가지는 setTnterval() 함수를 살펴보자.

setInterval(function(){
	console.log('1초마다 실행될 겁니다.')
}, 1000)

 setInterval 함수는 주기함수로, 인자로 콜백함수와 주기를 가진다. 이때, 주어진 주기마다 콜백함수를 실행시키는 기능을 한다. 위의 코드에서 '1초마다 실행될 겁니다.'라는 문장은 주어진 주기인 1초마다 출력되게 될 것이다.

 문장을 1초마다 출력되도록 만든 것은 사용자가 아니다. 이는 setInterval() 함수가 실행한 것이다. 이처럼 콜백함수를 사용하면 다른 함수가 콜백 함수의 제어권을 소유하게 된다.

 

 

 

콜백 함수의 특징

 

 1. 다른 함수(A)의 매개변수로 콜백함수(B)를 전잘하면 A가 B의 제어권을 가지게 된다.

 2. 특별한 요청이 없는 한 A에 미리 정해진 방식에 따라 B를 호출한다.

             : 정해진 방식이란? this에 무엇을 바인딩할지, 매개변수에는 어떤 값을 지정할지, 어떤 타이밍에 콜백을 호출할 지 등등

 3. 콜백 함수는 함수이다. 메소드를 콜백함수처럼 사용해서는 안된다.

 

 

 

비동기 처리

 

 콜백 함수는 주로 비동기 처리의 문제점을 해결하기 위해 사용된다.

 비동기 처리란, 프로그램이 순차적으로 처리되지 않는 것을 말한다. 즉, 특정 코드의 연산이 끝날때까지 기다려야 하는 코드가 있다면 해당 코드를 기다리지 않고 다른 코드를 먼저 실행하는 처리 방법이다. 

 

 아래의 코드를 살펴보자.

setTimeout(function(){
	console.log("wait!");
}, 1000)

console.log("okey! I'm wait");

 만약 순차적으로 처리한다면, 1초를 기다린 후 "wait!"이 출력되고 "okey! I'm wait"이 출력될 것이다.

 

<결과>
okey! I'm wait
wait!

 하지만 출력문을 살펴보면 예상과 다른 결과가 나왔음을 알 수 있다. 

 이처럼 자바스크립트는 비동기 처리를 지원하기 때문에 코드 실행 순서가 뒤죽박죽으로 될 수 있다. 이런 난처한 상황을 해결해줄 수 있는 함수가 바로 콜백함수인 것이다.

 

function setTimeCallback(callback){
	setTimeout(function(){
		console.log("wait!");
	}, 1000);
    
	callback();
}

setTimeCallback(function(){
	console.log("okey! I'm wait");
});

 위의 실행 코드를 콜백함수를 이용하도록 변경한 코드이다. setTimeCallback() 함수에서 콜백함수를 인자로 받아 setTimeout() 함수를 실행한 후에 콜백함수를 실행하도록 정의되어 있다.

 

<결과>
wait!
okey! I'm wait

 그 결과, 프로그램이 동기적으로 실행되었음을 알 수 있다.

 이처럼 콜백함수는 프로그램 내에서 동기적 프로그래밍을 가능하게 만들어 준다.