[javascript] 비동기1 - 콜백함수

자바스크립트의 비동기 처리

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성으로,

자바스크립트가 싱글 스레드라서 비동기처리가 필요한 것이다!

멀티스레드인 자바는 하나의 스레드가 놀아도, 다른 스레드가 일할텐데 자바스크립트는 스레드가 하나라 쉴틈없이 일을 하는 것.

 

 

비동기 처리는 이벤트 루프와 콜스택(call stack)을 이용한다.

call stack에는 func1, func2... 가 쌓인다. 

그중 비동기 코드가 호출되면 webAPI를 통해 완료된 결과는 task queue에 저장되고, 

이벤트 루프는 call stack과 task queue를 감시하다가, call stack이 비워지면 task queue에 저장되어 있는 콜백함수를 call stack에 저장한다.

 

 

참고! 

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)

 

 

 

사례1) 제이쿼리의 ajax 또는 fetch

제이쿼리로 실제 웹서비스를 개발할 때, ajax 통신을 한다. 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데, 이때 ajax 통신으로 해당 데이터를 서버로부터 가져온다.

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

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

$.get(url, function(response) {  })  

url에 HTTP get 요청을 보내 받아온 데이터를 response 인자에 저장된다.

 

Q. 콘솔에 getData()를 출력하면 undefined가 나오는 이유는?

A.  $.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문.

따라서, getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값 undefined를 출력

 

 

 

사례2) setTimeout(function() {    }, ms)

ms 시간만큼 기다렸다가 function을 실행하는 API. ms동안 기다리기만 하는게 아님. 그 다음줄의 코드를 실행하는 것.

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

여기서  #1 출력 -> #3 출력 -> #2가 출력된다.

 

 

 

---

콜백 함수 Callback

콜백함수

비동기적으로 동작하는 경우에, 데이터가 준비된 시점에 원하는 동작을 수행하도록 콜백함수를 사용한다.

 

콜백지옥

서버에서 데이터 받아옴, 그 데이터로 파싱하여 id추출, id로 인증함, 인증결과를 화면에 표출함.

이 모든 과정을 비동기로 처리하면 아래와 같은 콜백 안에 콜백을 계속 물게 된다. 이게 콜백 지옥

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

 

콜백지옥의 해결책

ES6에서 제공하는 Promise과 ES8에서 제공하는 Async / Await

브라우저에서 제공하는 webAPI setTimeout, setInterval 등이 존재한다.