JavaScript 의 비동기 처리

Java Script 의 비동기 처리는 특정 코드의 연산이 끝나기 전까지 Thread 가 Blocking 되지않고 다음 코드를 실행하며, 이후 CallBack 으로 연산 결과를 받는 자바스크립트의 특성을 의미한다.

 

---

사례

• Ajax 가 대표적이다. 
• 해당 코드는 Blocking 되지않고 내려가기 때문에 log 결과는 undefined 이다.

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

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

• setTimeout()
• 해당 Web API 도 Blocking 되지 않는다.

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


// => Hello , Hello Again , 3초 뒤에 Bye

 

---

CallBack 함수를 사용하여 비동기 처리 방식의 문제를 해결하기

• 기술한 문제들은 해결할 수 있는 방법은 CallBack 이다.
• 처리가 완료된 뒤 수행하는 메서드를 정의하면 된다.

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

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

• JavaScript 에서 CallBack 함수를 여러번 호출하면 CallBack Hell 이 일어나고는 한다.
• 여러개의 기능을 하나의 Task 로 묶어 호출하는 과정에서 많이 발생한다.

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

// Stack 상 거꾸로 거슬러 올라감