[Javascript] 콜백 함수(callback function)

콜백함수란

사전을 찾아보면 콜백함수는 아래와 같이 정의된다.

1) 다른 코드의 인수로서 넘겨주는 실행 가능한 코드 2) 어떤 이벤트에 의해 호출되어지는 함수

종합해보면 다른 코드가 불러서(call) 인수값을 넘겨주면 그제서야 실행되는 함수가 콜백함수이다.

 

콜백함수의 구조

.특정 함수 A의 매개변수 값으로 콜백함수 callback 가 들어온다.

.A 의 처리결과값이 callback의 매개값으로 주어진다.

.callback 이 수행된다.

 

콜백함수의 사용

1) 함수의 구조적 설계

콜백함수는 주로 함수의 내부의 수행결과를 함수 외부로 보낼 때 사용하게 된다. 콜백함수를 사용하면 로직 처리 부분과 나머지 부분을 구분하는 것이 가능한데, 함수를 구조적으로 설계할 목적으로 사용한다. 함수를 구조적으로 구성하면 함수를 부품으로 사용할 수 있게 된다. 이로써 특정 역할을 수행하는 함수와 조립하거나 함수 수정 및 재사용이 용이해진다.

 

2) 비동기 처리

동기(Synchronous)와 비동기(Asynchronous)에 대해 간략히 개념만 알아보자면, 비동기 처리란 동기 처리의 반대개념이다. 프로그램을 실행하면 코드가 한줄씩 처리되는데, 동기 처리는 함수A를 호출하면 A가 끝나야 A를 호출한 지점으로 되돌아온다. 반대로 비동기 처리는 함수B를 호출하면 B는 B대로 코드를 실행하고, B를 호출한 코드는 B의 결과를 기다리지 않고 아래 코드를 이어서 실행된다. 

 

*example

타이머 함수는 대표적인 비동기 처리 함수이다.

// 0.5 초 간격으로 수행
var time = 1;
var interval = setInterval(
	function interval(){
		console.log(time++)
	}, 500
);
console.log('내가 먼저 실행되지요');

// 5초 후에 정지
setTimeout(
	function stop(){
		clearInterval(interval)
	}, 5000
);

 

*결과

내가 먼저 실행되지요 1 2 3 4 5 6 7 8 9

 

 

3) 이벤트 처리

프로그래밍에서 이벤트란 프로그램이 인지할 수 있는 사건을 의미한다. javascript에서 이벤트는 화면클릭, 키보드입력, 특정 item에 마우스 커서를 올릴 때(hover) 등이 있다. 위에서 콜백함수를 설명하면서, 다른 함수가 호출하면 '그제서야' 실행된다고 설명했다. 콜백함수는 이벤트 처리 코드에 적절하다. 사용자가 화면터치한다든지, 타이핑을 언제할지 모르기 때문에, 이를 감지(listen)하고 있다가 이를 처리(handle)할 객체 혹은 함수가 필요한데 이때 콜백함수로 정의해 사용한다.

 

 

return 값이 있는 함수 vs 콜백 함수

콜백함수는 리턴값이 있는 함수를 매개변수로 받아 결과값을 넣어주기 위해 사용한다.

일반적인 리턴값을 가지는 함수 대신 사용할 수 있는 방법이다.

 

*일반적인 함수

function f(){
	var a = 로직;
	return a;
}

 

*콜백 함수

function f( callback ){
	var result = 로직;
	callback(result);
}

 

 

 

*example

콜백 함수 예제 코드를 살펴보자.

먼저 콜백 함수를 사용하지 않는 예제이다.

function add(a, b){
	return a + b;
}

function answer_ko(x){
	return '결과 = ' + x;
}

function answer_en(x){
	return 'result = ' + x;
}

function print_ko(a, b){
	var result = add(a, b);
	var answer = answer_ko(result);
	console.log(answer);
}

function print_en(a, b){
	var result = add(a, b);
	var answer = answer_en(result);
	console.log(answer);
}

print_ko(2, 3);
print_en(2, 3);

두 수를 더한 값을 계산해 적절히 멘트를 붙여 출력하는 코드이다.

함수 print_ko 와 print_en 는 콘솔창에 출력하는 역할 밖에 수행하지 않는데 코드가 중복된다.

 

*결과

결과 = 5 result = 5

 

 

이어 콜백 함수를 사용하는 예제를 보자.

function add(a, b){
	return a + b;
}

function answer_ko(x){
	return '결과 = ' + x;
}

function answer_en(x){
	return 'result = ' + x;
}

function print(a, b, answer){
	var result = add(a, b);
	var ans = answer(result);
	console.log(ans);
}

print(2, 3, answer_ko);
print(2, 3, answer_en);

.함수 print_ko, print_en 을 합쳐 중복 코드를 없앴다.

.함수 print() 를 보면 매개값으로 answer를 받는데, 함수 내부에서 수행한 결과값인 변수 result를 받는 역할을 한다.

.적절히 한국어 혹은 영어 멘트를 붙여주고 콘솔창에 출력된다.

 

*결과

결과 = 5 result = 5