JS, 비동기 처리와 콜백함수

비동기 처리에 대해 내용을 정리하려고 한다.

 

비동기 처리란

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

 

코드를 통해 비동기 처리를 이해해보자

먼저 비동기와 관련된 코드들을 보자

( 캡틴판교님 블로그에서 가져온 예제 )

// ajax 통신
function getData() {
	var tableData;
    // 값을 가져오는 요청을 했지만 기다려주지 않는다.
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

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

// 위와 같이 서버로부터 값을 가져오거나 
// DB에서 데이터를 비교해야 하는 경우 등의 사례에서 문제가 발생할 가능성이 있다.

setTimeout 사례

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

// acutual output 
// Hello
// Hello Again
// ..after 3 sec
// Bye

위의 코드는 3초 간 기다려줄 것처럼 보이지만 실제로는 그렇지 않다.. 

 

그래서 이를 해결하기 위해 콜백함수를 사용한다

JS 코드를 통해보자

function timeout(callbackParameter) {
    setTimeout(() => {
        console.log('SetTimeout');
        callbackParameter();
    }, 3000)
};

timeout(() => {
    console.log('Done !');
})

setTimeout과 callback 함수를 이용하여 
SetTimeOut, Done이 출력되게 하였다. 

 

그런데 이런 callback을 무분별하게 사용하다 보면

관리도 힘들고 코드 가독성을 해치는 상태가 되는데 이를 콜백 지옥이라고 한다.

 

해당 내용은 아래 페이지의 콜백지옥을 보자

콜백

 

이러한 콜백지옥을 promise 문법을 통해 해결 할 수 있다.

promise와 async, await는 다른 글로 정리해보려고 한다.

 

출처 

: 캡틴판교 - 자바스크립트 비동기 처리와 콜백 함수