[Javascript] 비동기 구현 방식 - 콜백함수

🦄 자바스크립트에서 비동기 구현 방식

자바스크립트에 비동기 구현 방식은 콜백함수, Promise, async await 세 가지가 있다.

::콜백함수

콜백함수는 나중에 호출할 함수를 뜻한다. 함수 타입의 값을 파라미터로 넘겨 파라미터로 받음 함수를 특정 작업이 끝나고 호출해주는 방식이다.
콜백함수의 동작방식을 예시로 들어보면 식당 예약을 생각해보자. 맛집에 갔는데 사람이 너무 많아서 대기자 명단에 이름과 전화번호를 남기고 전화가 올 때까지 다른곳에서 사부작거릴 수 있다.
식당에서 자리가 나서 전화가 왔다. 이 전화를 받는 시점이 콜백 함수가 호출되는 시점이라고 생각할 수 있다.
자리가 났을 때 연락이 오기때문에 미리 가서 기다릴 필요도 없고, 자리가 있는지 직접가서 확인할 필요도 없다.

• 자리가 준비된 시점 = 데이터가 준비된 시점
• 전화가 온 시점 = 콜백 함수가 호출됨
• 자리에 앉음 = 원하는 실행

::::콜백지옥 (Callback hell)

예시

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

이렇게 콜백함수 안에서 또 콜백함수를 지정해주는것이 콜백함수이다. 이 콜백함수의 문제점은

• 가독성이 너무 떨어진다. 어디서 어디로 연결되어 있는지 한눈에 파악하기가 힘들고, 에러가 발생했을 때 디버깅 하기가 너무 어렵다. 에러가 어느 콜백함수에서 처리되는지 찾기가 힘들다.

코딩 패턴으로 콜백지옥 해결하기

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);
});

중첩된 콜백함수를 각각의 함수로 구분했다. 해석해보자면
1. ajax통신으로 받은 데이터를 parseValue()로 파싱한다.
2. parseValueDone()에 파싱한 결과값인 id가 전달되고 auth()가 실행된다.
3. auth()로 인증을 거치고 나면 콜백 함수 authDone()이 실행된다.
4. 인증 결과 값인 resultfh display()를 호출하면 마지막으로 displayDone()이 실행되며 text가 콜솔에 출력됨