[자바스크립트] callback 함수

callback 함수란?

자바스크립트를 공부하다보면, 많이 듣고 사용하는 단어 중 하나가 바로 callback 함수이다. callback 함수가 무엇이길래 계속해서 등장하고 사용되는 것일까?

 

자바스크립트에서는 함수는 데이터로 취급받는다. 그리고 모든 데이터는 타입을 가지고 함수는 함수 타입의 데이터를 가진다.

console.log(typeof function(){})  //function

 

그리고 데이터의 타입은 원시타입(primitive type) 과 객체타입(object type)으로 나뉘게 되는데, 함수 타입은 바로 object 타입에 속하는 데이터의 타입이다. 정리하면, 자바스크립트에서 함수는 하나의 데이터이고 함수 타입의 객체라는 것이다.

 

그렇기 때문에 함수는 변수에 할당할 수도 있고, 인자로도 넘겨지고, 리턴값으로도 넘겨지는 등의 여러 동작들이 가능한 것이다. 이 때에 함수가 다른 함수의 인자로 넘겨질 때, 해당 함수를 콜백함수라고 한다.

 

또는, 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수도 콜백함수라고 한다.

 

 

 

callback 함수가 필요한 이유

콜백 함수는 자바스크립트에서 매우 중요한 개념 중 하나이다. 그 이유로는 자바스크립트는 동기적으로 실행되는 언어이기 때문이다. 동기적으로 실행된다는 것은 코드를 위에서 아래로 순차적으로 실행하는 것이다.

 

즉, 이전의 작업이 얼마가 걸리든지 마무리를 한 다음에 다음 코드가 실행되는 것이다. 이전 작업의 결과가 현재의 작업에 영향을 미친다면 괜찮지만, 영향을 미치지 않는 별도의 작업이라면 프로그램의 실행 시간이 길어진다는 단점이 있는 것이다.

 

어떤 경우에서는, 하나의 코드가 완료되지 않더라도 다음 코드를 실행시키는 비동기도 필요한 것이다. 자바스크립트에서 이를 위해 ES5에서 등장한 것이 바로 callback 함수이다.

 

callback 함수는 비동기적 프로그래밍을 위해 등장한 개념

 

비동기 프로그래밍을 위해 함수를 등록시켜야 했고, 함수를 객체로서 등록하는 개념이 등장하게 된 것이고 이것이 바로 콜백인것이다. 그렇기 때문에 특정 이벤트가 발생한 후에 호출하기 위한 함수 객체를 념겨주는 것 또한 콜백함수이고 함수의 인수로서 함수 객체를 넘겨주는 것 또한 콜백 함수 인 것이다. (둘 모두 함수 객체를 넘겨주는 것!! <= 이게 콜백 함수의 핵심 개념)

 

 

 

비동기 작동 방식 in JavaScript

자바스크립트는 동기 언어이다. 그런데 어떻게 비동기를 사용하여 프로그래밍을 할 수 있을까? 비동기를 동작시키기 위해서는 자바스크립트 엔진만으로는 불가능하다. 그렇기 때문에 도움을 주는 친구들이 필요한 것이다.

바로 Web APIs, Callback Queue, Event Loop 이다. 예제 코드를 통해 간단하게 동작 과정에 대해 살펴보자.

const message = function () {
    console.log('callBack Function');
}

//setTimeout => 지정한 시간(밀리초)가 끝난 뒤 콜백함수 호출
setTimeout(message, 3000);

console.log('이건 언제 실행??');

 

setTimeout은 비동기적인 실행을 위해 window 객체가 제공하는 비동기 함수이다. 그렇기 때문에 위 코드를 실행시켠 다음과 같은 결과가 나온다.

이건 언제 실행??
callBack Function

 

내부에서 어떻게 동작하는지 동작 과정을 살펴보자.

• 콜 스택에 setTimeout이 들어옴
• setTimeout은 비동기 함수로, 브라우저가 처리 => 콜 스택에서 webAPIs 로 넘김
• 자바스크립트 엔진은 setTimeout의 실행을 끝낸것으로 간주 => 다음 코드로 넘어감
• 콜 스택에 console.log('이건 언제 실행??'); 이 들어오고 처리
• webAPIs에서 setTimeout에 지정된 시간이 지난 후, 콜백 큐에 등록된 콜백함수(message)를 넘김
• eventListner가 콜 스택을 주시하고 있다가 콜백 함수(message)를 콜 스택에 넘김
• 자바스크립트 엔진이 넘겨받은 콜백함수(message)를 실행 => callBack Function 출력

 

위의 과정처럼, 동기 언어인 자바스크립트는 WebAPIs, callback Queue, event loop의 도움을 받아 비동기적 프로그래밍이 가능한것이다.

 

 

 

callback 함수 사용 방법

callback 함수의 사용 방법은 크게 어렵지 않다. 단순히 함수의 객체를 함수의 인수로 넘겨주면 되기 때문이다. 콜백 함수로 넘겨주는 함수는 익명함수를 사용한다.

// 콜백 함수
// 함수의 인수로 넘겨줌
// 익명 함수 사용, 화살표 함수 사용 가능(ES6 부터)

function A ( callback ) {
    callback( 'hi' );
}

const B = function(data) { console.log(data) } ;

A ( B );

 

위의 예제의 동작 흐름은 아래와 같다.

• 함수 A가 실행
• A의 매개변수 callback = B = function(data) { ... } => callback = function(data) { ... }
• callback('hi') => 'hi'를 출력

 

자바스크립트는 이벤트 기반 프로그래밍이기 때문에 다음과 같이 사용할 수 도 있다. 사용자가 버튼을 클릭하였을 때, 버튼을 클릭했다는 메세지를 콘솔에 띄어보자.

<!-- html -->
<button id = 'callback'>Click!!</button>

 

자바스크립트 코드는 아래와 같이 작성한다.

<script>
    document.querySelector('#callback')
        .addEventListner('click', function() {
            console.log('click');
        });
</script>

 

해당 코드를 동작시키면, 콘솔 창에 click이 잘 실행되는 것을 확인할 수 있을 것이다. 더불어, 해당 코드가 자바스크립트에 내부에서 어떻게 동작하는지도 생각해보기를 바란다!!

 

 

 

주의할 점

콜백 함수를 사용할 때 주의할 점은 바로 this의 사용이다. 이 것에 관해서 다룬 내용은 아래의 링크에 있으니 참고하기 바란다.

https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Arrow-Function

[자바스크립트] Arrow Function

 

또한, 콜백 함수는 남용할 경우 코드를 번잡하게 만든다는 문제점이 있다. 콜백 함수 내의 콜백함수를 계속해서 사용하다 보면 아래 사진과 같은 상황이 발행하는데 이를 콜백 지옥 (callback hell)이라고 부른다.

callback hell

 

이를 해결 하기 위해, ES6에서 promise라는 개념이 나왔다. 이에 대해서는 추후에 다루겠다. 이러한 점만 조심한다면, 콜백함수를 보다 능숙하게 사용할 수 있을 것이다.