[JavaScript] 비동기(asynchronous)처리 이해하기

자바스크립트는 단일 스레드로서 비동기 처리 프로그래밍을 한다. 비동기 처리는 무엇일까?

--> 비동기 처리는 함수나 메소드의 Input과 Output이 동시에 일어나지 않는 것이다.

 

그래서 개발자가 코드 순서대로 결과값이 도출되고 처리된다고 생각하면 오류가 발생한다. 다음의 예를 보자

function data(){
    const ajaxData;
    $.get('https://testdomain.com/androman/1',function(response){
    	ajaxData = response;
    });
    return ajaxData;
}

console.log(data());	//결과는 undefined

개발자는 console.log 괄호 안의 data 함수가 서버에서 받아온 데이터를 return 하고 콘솔로 그것이 출력될 것이라고 생각할 수 있지만 결과는 undefined다. 자바스크립트는 비동기로 작동하기 때문에 data함수의 output이 나오기 전에(결과를 기다리지 않고) console의 log 메소드를 실행시키기 때문이다.

여러 함수를 동시에 사용하다 보면 이런 실수를 할 수 있다. 콜백(callBack)함수를 사용하면 비동기 처리 방식에서 함수의 작동 순서를 정해줄 수 있어 오류를 발생시키지 않고 개발자가 원하는 처리를 할 수 있다.

콜백 함수는 함수의 인자로 전달되는 함수로써 실행되는 함수에서 원하는 처리가 끝난 위치에서 콜백 함수를 호출함으로써 함수들의 작동 순서를 정할 수 있다.

위의 오류가 발생한 코드를 콜백 함수를 사용하여 개발자가 의도한 결과가 나오는 예시로 바꿔보면 다음과 같습니다.

function data(callBack){
    $.get('https://testdomain.com/androman/1',function(response){
    	callBack(response);
    });
}

data(function (ajaxData) {
	console.log(ajaxData);		//ajax통신 결과로 받은 data를 출력
});

 

1. 우선 함수를 정의할때 인자로 callBack(함수)을 정의

2. ajax통신으로 response받은 데이터를 callBack함수의 인자로 전달합니다.

--> data 함수를 호출할때 함수 인자로 들어간 익명함수가 callBack함수 역할을 합니다. 익명함수 function(ajaxData)에서 ajaxData는 함수 정의 부분의 response와 일치하며 ajax통신이 끝난 후 ajaxData 부분에 결과값이 들어가기 때문에 console.log가 올바른 결과값을 출력할 수 있습니다.

 

참고 사이트

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