javascript 비동기 처리와 콜백 함수

비동기 처리와 사례 2개

비동기 처리란 특정 연산이 끝날 때까지 실행을 멈추지 않고 다음 코드를 실행하는 특성
ajax 통신과 setTimeout() 의 경우 비동기 방식으로 실행됩니다.

콜백함수로 비동기 방식의 문제점을 해결할 수 있습니다.

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

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

ajax 통신으로 요청하고 받으면 그 데이터를 반환하는 2번째 인자 콜백함수에
동기적으로 순서가 지켜져야하는 console.log를 넣는다.

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

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

콜백함수 동작 방식

ajax통신을 식당 예약이라 하면 맛집 식당예약을 하고 자리가 다 차서
다른 식당을 찾아다니다가 식당 이용을 할 수 있게 되면 가서 이용하는 것

콜백 지옥

비동기 처리 로직을 위해 콜백을 연달아 사용하면 발생하는 문제입니다.
가독성이 떨어지고 로직을 변경하기 어렵습니다.

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

콜백 지옥 해결 방법

Promise 또는 async 또는 코딩 패턴을 사용하는 방법이 있습니다.

코딩 패턴

콜백 지옥 해결을 위해 각 콜백 함수를 분리해줍니다.
중첩해서 선언했던 콜백 익명 함수를 각각 함수로 구분했습니다.

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

그러나 Promise 나 async를 이용하면 더 편하게 구현할 수 있습니다.
이는 다음 글에서 확인합니다.