[JavaScript] Callback Function ( 콜백 함수 )

개요

JavaScript에서는 특정 함수의 파라미터( 매개 변수 )로 함수를 넘겨줄 수 있다. 이 때, 파라미터로 넘어온 함수를 'Callback Function( 콜백 함수 )'라고 부르게 되고, 전달받은 함수가 이 콜백 함수의 제어권을 갖게 된다.

JavaScript에서는 함수를 다양한 형태로 사용할 수 있으며, 콜백 함수의 경우 실제로 유용하기도 하고 많이 사용되는 형태이다.

 

Callback Function의 사용

일반적인 형태

function calculate( x, y, func ){
	let result = func( x, y );
    console.log( result );
}

function add( x, y ){
	return x + y;
}
function minus( x, y ){
	return x - y;
}
function multiple( x, y ){
	return x * y;
}
function division( x, y ){
	return x / y;
}

calculate( 6, 3, add );
calculate( 6, 3, minus );
calculate( 6, 3, multiple );
calculate( 6, 3, division );

위 예제와 같이 calculate() 이라는 함수는 파라미터로 3개의 인자를 받는다.

이 때, calculate() 함수 내부를 보 앞선 두 개는 값이고 마지막 하나는 함수이다.

그렇기에 이 세 번째 파라미터로 어떤 함수를 넘겨주느냐에 따라 console에 출력되는 계산 결과는 달라지게 된다.

이와 같은 함수 형태를 Callback Function, 한글로 콜백 함수라고 부른다.

 

한 줄로 표기하는 형태

function calculate( x, y, func ){
	let result = func( x, y );
    console.log( result );
}

calculate( 6, 3, function( x, y ){
	return x + y;
});
calculate( 6, 3, function( a, b ){
	return a - b;
});
calculate( 6, 3, function( i, j ){
	return i * j;
});
calculate( 6, 3, function( num1, num2 ){
	return num1 / num2;
});

위 예제를 보면 add, minus, multiple, division 이라는 함수를 따로 만들지 않고 콜백 함수 이름이 들어갈 자리에 바로 정의했다.

이렇게 간단한 함수의 경우 따로 함수를 생성하지 않고 일회용 함수로 사용해도 무관하다.

단점이 있다면 해당 함수는 당연하게도 재사용할 수 없다..

 

Arrow Function 사용

익히 '람다 함수' 형태로도 사용할 수 있다.

function calculate( x, y, func ){
	let result = func( x, y );
    console.log( result );
}

calculate( 6, 3, (x, y) => x + y );
calculate( 6, 3, (a, b) => a - b );
calculate( 6, 3, (i, j) => i * j );
calculate( 6, 3, (num1, num2) => num1 / num2 );

가장 짧고 간결하게 표현된 형식이다. 이처럼 => 를 사용해 람다 함수 형태로 표현할 수도 있다.

물론 이는 => 뒤로 오는 실행문이 한 줄인 경우에만 해당된다. 

두 줄 이상으로 될 때는 { } 으로 감싸는 형태를 사용해야 한다.

이 형태를 보면 return 키워드 또한 생략된 것을 볼 수 있다.

 

결론

JavaScript는 특이하게 생긴 형태로 함수를 많이 사용한다. 실제로 프론트엔드 개발을 하다 보면 되게 다양한 형태로 표현된 함수들을 볼 수 있다. 람다 형태야 Java에서도 사용했기 때문에 익숙했지만 전혀 익숙하지 않은 형태들이 쏟아져 나와 헷갈리는 경우가 많았다. 게다가 JavaScript의 특징 중 하나가 자료형을 지정하지 않는데 그렇다보니 함수로 전달한다는 저 개념도 조금 생소했다.