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

비동기 처리란?

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

이미지 출처 https://learnjs.vlpt.us/async/

 

비동기 처리의 첫 번째 사례

• 가장 흔한 사례는 제이쿼리의 ajax가 있다.

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

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

• 서버에서 받아온 데이터는 response 인자에 담기고 tableData 변수에 저장한다.
• 그럼 getData()를 호출하면 어떻게 될까? -> undefined가 뜬다.
• 그 이유는 $.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 return tableData를 실행했기 때문이다.
• 따라서, getData()의 결과 값은 초기 값을 설정하지 않은 undefined가 출력된다.

 

비동기 처리의 두 번째 사례

• setTimeout() : 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다.

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

• setTimeout() 역시 비동기 방식이므로 3초를 기다리지 않고 "Hello Again"가 먼저 찍히고 3초 뒤에 "Bye"가 찍힌다. 

 

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

• 우선 해결방법으론 콜백(callback)함수를 이용하는 것이다. 다음 코드는 위에서 본 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에 전달됨
});

• 위와 같이 통신이 끝나면 getData()함수를 실행시켜 주면 원하는 동작을 할 수 있다.

 

위와 같은 방법도 문제점이 존재 한다.

콜백 지옥 (Callback hell)

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

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

• 기능들이 많이 묶여 있고 모든 과정을 비동기로 처리해야 한다고 하면 위와 같은 콜백 안에 콜백을 계속 무는 형식의 코딩이 된다.
• 이러한 코드 구조는 가독성도 떨어지고 로직을 변경하기도 어렵다.

 

콜백 지옥 해결방법

• 일반적으로 Promise나 Async를 사용하는 방법이 있다.

 

출처 

joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/