자바스크립트 콜백 함수(Callback Function)

자바스크립트에서 콜백(callback) 함수란, 다른 함수의 인자로 전달되어 특정 이벤트가 발생했거나 특정 작업이 끝났을 때 호출되는 함수를 의미합니다. 즉, 콜백 함수는 비동기적으로 처리되는 작업이 완료될 때까지 기다리지 않고, 미리 등록해둔 함수를 호출해주는 역할을 합니다. 이러한 특징 때문에 콜백 함수는 비동기 프로그래밍에서 핵심적인 역할을 하며, 이벤트 처리, HTTP 요청 등 다양한 분야에서 활용됩니다.

 

 

사용법

 

콜백 함수를 사용하면, 비동기적으로 처리되는 작업에서 발생하는 결과 값을 처리할 수 있습니다. 예를 들어, setTimeout 함수를 이용해 일정 시간이 지난 후에 특정 작업을 실행하도록 할 때, 콜백 함수를 이용해 이후에 실행될 작업을 지정할 수 있습니다.

 

setTimeout(function() {
	console.log('Hello, World!');
}, 1000); // 1초 후에 'Hello, World!' 출력

 

 

또한, 이벤트 처리에서도 콜백 함수를 활용할 수 있습니다. addEventListener 함수를 이용해 이벤트 핸들러를 등록할 때, 콜백 함수를 전달하여 이벤트가 발생했을 때 호출되도록 할 수 있습니다.

 

const button = document.querySelector('button');
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

 

콜백 함수는 인자를 전달받을 수 있으며, 이를 이용해 다양한 처리를 할 수 있습니다. 예를 들어, XMLHttpRequest 객체를 이용해 HTTP 요청을 보낼 때, 요청이 완료되면 콜백 함수를 호출하며, 인자로 HTTP 응답 결과를 전달합니다.

 

 

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
	console.log(xhr.response);
};
xhr.send();

 

하지만, 콜백 함수는 여러 개를 중첩해서 사용하면 코드의 가독성과 유지보수성을 저하시킬 수 있는 콜백 지옥(Callback Hell) 문제가 발생할 수 있습니다. 따라서, 최근에는 Promise나 Async/Await와 같은 비동기 처리 방식이 널리 사용되고 있습니다.