JavaScript - 비동기 처리/콜백 함수

비동기 처리란?

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

 

비동기 처리 예시

비동기 처리의 가장 흔한 사례는 제이쿼리의 ajaz이다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수가 없다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문이다.

 

<코드>

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

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

'https://domain.com'에다가 HTTP GET 요청을 날려 1번 상품 정보를 요청하는 코드이다. 즉, 지정된 URL에 '데이터를 하나 보내주세요'라는 요청을 날리는 것이다.

 

그렇게 서버에서 받아온 데이터는 reponse인자에 담기게 되며, 그 데이터를 tableData라는 변수에 저장한다. 그리고 나서, getData()를 호출하게 되면 undefined라는 결과가 나온다.

 

그 이유는 &.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행해버리기 때문이다. 따라서, getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값인 undefined가 출력된다.

 

이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다. 자바스크립트에서 비동기 처리가 필요한 이유는, 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지모르며, 다른 코드를 실행 안하고 기다릴 순 없기 때문이다. 위에는 간단한 요청 1개만 보냈지만 만약 100개의 동기 처리라면 코드 실행하고 기다리고, 실행하고 기다리고 웹 애플리케이션을 실행하는데에 수십 분이 걸리게 된다.

 

[참고]

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수