[자바스크립트] 비동기 처리와 콜백 함수

비동기 처리

특정 코드의 연산이 끝날 때까지 코드 실행을 멈추지 않고 다음 코드를 먼저 실행

ex)
// #1
console.log('Hello');
// #2
setTimeout(function() {
	console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');

비동기 처리에 대한 이해가 없는 상태에서 위 코드를 보면 아마 다음과 같은 결과값이 나올 거라고 생각할 겁니다.

‘Hello’ 출력
3초 있다가 ‘Bye’ 출력
‘Hello Again’ 출력
그런데 실제 결과 값은 아래와 같이 나오죠.

‘Hello’ 출력
‘Hello Again’ 출력
3초 있다가 ‘Bye’ 출력
setTimeout() 역시 비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음 코드를 수행하는 것이 아니라 일단 setTimeout()을 실행하고 나서 바로 다음 코드인 console.log('Hello Again');으로 넘어갔습니다. 따라서, ‘Hello’, ‘Hello Again’를 먼저 출력하고 3초가 지나면 ‘Bye’가 출력됩니다.

콜백 함수로 비동기 처리 방식의 문제점 해결

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function(tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});