콜백 함수(Callback function) with javascript

안녕하세요 기공준입니다.

이번 글은 콜백 함수에 대해 간단히 알아보고 자바스크립트 예제로 조금 더 쉽게 이해해보려고 합니다.

 

먼저 콜백 함수 이전에 콜백에 대해서 간단하게 알아보겠습니다.

 

콜백(Callback)

콜백은 다른 코드의 인수로 넘겨지며, 실행 가능한 코드입니다.

이 콜백을 넘겨받은 코드는 콜백을 필요에 따라 즉시 또는 나중에 사용할 수 있다고 합니다.(동기 비동기에 관한 내용인 듯)

 

콜백 함수(Callback function)

콜백 함수는 다른 함수에 인수로 전달된 함수입니다.

 

그럼 예제를 보고 더 쉽게 이해해봅시다.

예제 - 동기 콜백 함수

function hiHello(name){
	console.log("Hi, "+name);
}

function hi(name,hello){
	hello(name);
}

hi("angerscroll",hiHello);
// Hi, angerscroll 출력

설명 - 먼저 hihello라는 함수는 name이라는 인수를 받아서 메시지를 출력하는 함수로 선언되었다.

다음 hi라는 함수는 name이라는 인수와 hello라는 인수를 받게 되는데 함수 안을 들어다 보면 hello라는 함수가 name이라는 인수를 받고 있다. 그러므로 hi 함수의 인수중 hello라는 인수는 함수라는 걸 알 수 있다.

다음 줄을 보게 되면 hi 함수를 호출하게 되는데 이때 문자열과 hiHello함수를 받게 되므로 이때 다른 함수에 인수로 전달된 hiHello라는 함수는 콜백 함수가 된다.

hi 함수는 인수로 받은 콜백 함수 hiHello를 호출하기 때문에 Hi, angerscroll이라는 메시지가 출력이 된다.

이렇게 동기식 예제를 살펴보았는데, 보통 콜백 함수는 비동기로 많이 쓰게 된다.

이 비동기에 관한 콜백 함수는 엄청 중요하기 때문에 더욱 깊은 내용으로 다른 글에서 알아보도록 하겠습니다.