[JavaScript] 자바스크립트 콜백함수(callback function)

콜백 함수(CallBack function)?

다른 함수에 파라미터로 넘겨지는 함수를 말한다. 이렇게 넘겨진 함수는 특정 시점에 호출되는데 보통 함수를 호출하고 새롭게 다른 작업이 실행되어야 하거나 호출한 함수가 끝나고 다음 함수가 실행되어야 할 때 사용한다.

기본 형태

function f1(callback) {
    callback();
}
function callback() {
    console.log("callback");
}

f1(callback);

함수 f1은 callback이라는 파라미터를 받아서 그 callback 함수를 실행하도록 정의되어있다. 그리고 함수 f1을 호출할 때 그 파라미터 같이 넘긴 상태로 호출한다. 내부 구조를 보면 f1이 호출될 때 callback이라는 이름을 가진 특정 콜백 함수를 실행시켜 그 함수에 제어권을 부여한다. 이때 callback 함수의 주체는 여전히 함수 f1이 갖고 있다.

결과

callback

익명 함수를 콜백 함수로 사용

function f2(a, b, callback) {
    let multiply = a * b;
    callback(multiply);
}

f2(5, 10, function (multiply) {
    console.log(multiply);
});

함수 f2에서 파라미터로 받은 a와 b를 곱한 값을 콜백 함수의 파라미터로 전달하였다. 당연하게도 익명 함수 부분을 함수 선언문으로 정의해 그 함수를 파라미터로 넘겨도 된다.

function showResult(value){
  console.log(value);
}

f2(5, 10, showResult);

결과

자바스크립트의 다양한 콜백 함수

자바스크립트에서 이벤트 처리 메서드의 이벤트 핸들러와 리스너, 타이머 메서드에서 타임 핸들러가 바로 콜백함수이다.

이들 메서드의 특징은 특정 이벤트나 특정 시간이 흐른 후 실행하기 위한 함수가 필요하기 때문이다.

이벤트 핸들러 및 리스너

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">버튼</button>
</body>
<script>
    let a = document.getElementById("btn");

    // 이벤트 핸들러
    a.onclick = next;

    console.log("A");
    // 이벤트 리스너
    a.addEventListener("click", next);
    console.log("C");
    
    function next() {
        console.log("B");
    }
</script>
</html>

위 코드에서는 이벤트 핸들러와 이벤트 리스너를 등록시켰다. 이 메서드들은 웹 브라우저가 자바스크립트 코드를 읽을 때 해당 이벤트가 발생하면 실행시킬 함수, 즉 콜백 함수를 등록한다. 그리고 실제 이벤트가 발생해 해당 메서드가 실행되고 그 안에서 콜백 함수를 호출시킨다.

결과

A
D
// 버튼 클릭 발생
C
B

코드 상으로는 onclick 메서드가 로그 A보다 위에 addEventListner 메서드는 로그 C보다 위에 존재하지만 실제로는 버튼이 클릭할 때 콜백 함수 next와 next2로 인해 실행되기 때문이다.

타이머 메서드

전역 객체인 Window 객체에는 setTimeout과 setInterval이라는 특정 시간의 변화에 따라 함수를 실행할 수 있는 메서드가 있다. 함수가 동작하는 원리는 두 메서드가 동일하기 때문에 예제에서는 setTimeout 메서드만 실행하겠다.

console.log("AA");

setTimeout(function () {
    console.log("BB")
}, 3000);

console.log("CC");

setTimeout 메서드는 지정한 시간이 흐른 후 한 번 호출할 함수를 등록할 수 있다. 바로 이 호출할 함수가 콜백 함수이다.

결과

AA
CC
BB // 3초 후 콜백함수 호출로 실행됨

이벤트 메서드와 마찬가지로 코드는 로그 CC 위에 존재하지만 실제로는 3초가 지난 후 등록된 함수가 실행되기 때문에 위와 같은 결과를 보여준다.

이렇게 자바스크립트의 콜백 함수에 대해 알아보았다. 자바스크립트에서 콜백 함수란 개념은 중요하고 다음으로 공부할 비동기 처리방법과 밀접한 관련이 있다. 사실 위에서 말한 이벤트, 타이머 메서드가 자바스크립트 비동기 처리의 대표적인 경우다.

'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글

[JavaScript] 자바스크립트 async, await를 통한 비동기 처리 다루기 (0)	2020.09.10
[JavaScript] 자바스크립트 비동기 처리와 AJAX, promise(프로미스) (0)	2020.09.07
[JavaScript] 자바스크립트 이벤트 리스너 - 추가 정보 전달 (0)	2020.09.01
[JavaScript] 자바스크립트 이벤트 리스너 안의 this (0)	2020.09.01
[JavaScript] 자바스크립트 이벤트 전파 (0)	2020.08.31

탱구탱구 개발자 일기