[JavaScript] 비동기와 콜백 함수

비동기 처리란?

javascript의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다.

 

 

비동기 처리의 예시

(1) setTimeout()

setTimeout()은 Web API의 한 종류로 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행합니다.

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

/* 실행결과 */
Hello
Hello Again
Bye

setTimeout()은  비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음 코드를 수행하는 것이 아니라 일단 setTimeout()을 실행하고 나서 다음 코드인 'Hello Again'을 실행합니다.

 

 

(2) ajax

ajax통신으로 데이터를 서버로부터 가져올 때 비동기 처리가 발생합니다.

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData()); // undefined

$.get()이 ajax와 통신하는 부분입니다. 

$.get()로 데이터를 요청하고 받아올 때까지 기다리지않으므로 getData()의 결과 값은 undefined로 출력됩니다.

 

 

콜백 함수 ?

콜백 함수는 다른 함수에 매개변수로 넘겨준 함수입니다. 매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백 함수의 개념입니다.

콜백 함수의 동작 방식은 데이터가 준비된 시점에서 원하는 동작을 수행합니다.

 

 

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

콜백 함수를 이용하여  ajax통신 코드를 개선하였습니다.

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

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

 

 

콜백 지옥

콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제입니다.

$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});

 

 

콜백 지옥을 해결하는 방법은  Promise나 Async를 사용하는 방법이 있습니다. 

 

다음 글에서 Promise 및 Async를 알아보겠습니다.