[JavaScript]비동기와 콜백

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

가장 대표적인 비동기 처리의 사례는 JQuery의 Ajax이다.
JQuery로 웹 개발을 할 때 Ajax통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문이다.

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

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

여기서 $.get() 으로 Ajax 통신을 할 때 주소에다가 HTTP GET 요청을 날려 1번 상품(product) 정보를 요청하는 코드이다.
좀 더 쉽게 말하면 지정된 URL에 데이터를 요청하는 것과 같다.

그렇게 서버에서 받아온 데이터는 Response 인자에 담긴다.
그리고 tableData 에 저장한다. 

하지만 맨 아래 콘솔출력은 undefined이다.

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

이렇게 특정 로직의 실행이 끝날 때까지 기다리지 않고 다른 코드를 먼저 실행하는 것이 비동기 처리라 볼 수 있다.

자바스크립트에서 비동기 처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지 모르는데 마냥 다른 코드를 실행안하고 기다릴 수 없기 때문이다.

위에선 간단한 요청 1개만 보냈는데 만약에 1000개 이상이라 생각해보면 비동기 처리가 아니면 동기 처리라면 코드를 실행하고 기다리고 실행하고 기다리고 아마 웹 어플리케이션을 실행하는데 많은 시간을 소요하게 될 것이다.

또 다른 비동기 처리는 setTimeout() 이다. setTimeout()는  Web API의 한 종류이다.

코드를 실행하지 않고 일정 시간동안 기다렸다가 로직을 실행하는 코드이다.

console.log('Test1');

setTimeout(function() {
	console.log('Test2');
}, 3000);

console.log('Test3');

비동기를 배웠으니 결과가 예상이 될 것이다.

결과는

Test1
Test3
Test2
로 나온다. 이유는 Test2가 3초를 기다리는 동안 Test3이 실행되기 때문이다.

setTimeout은 비동기 방식으로 실행되는 함수이기 때문에 실행이 되기까지 그 뒤 코드가 기다려주지 않는다.

보통 이러한 비동기 방식이 마음에 안들면 콜백 함수를 사용한다.

---

콜백함수란?
말 그대로 나중에 호출되는 함수를 뜻한다.
콜백함수라고 해서 특별한 선언이나 문법이 이쓴ㄴ것이 아니고
자바스크립트의 함수와 똑같다.
콜백함수는 코드를 통해 명시적으로 호출되는 함수가 아닌 개발자가 단지 함수라고 등록하기만 하고 특정 이벤트가 발생했을 때나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.

---

function getData(callbackFunc) {
	$.get('https://test.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

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

이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 할 수 있게끔 할 수 있다.

하지만 콜백을 많이 쓰게 되면 if문이 많이 중첩되듯이 가독성이 떨어지고 추후에 코드 변경이 어려워질 수 있으니 주의가 필요하다.

이를 해결하기 위해선 promise 혹은 Async를 사용하는 방법이 있다.