비동기 처리 | Notion

자바스크립트는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하기도 하는데 이를 비동기 처리라고 한다.
```
function getData(){
	var tableData;
	$.get('https:/domain.com/products/1', 
		function(response){
			tableData = response;
		});
	return tableData;
}

console.log(getData()); // undefined
```
- 위 코드에서 undefined가 출력되는 이유는 $.get으로 데이터를 요청하고 받아올 때까지 기다리지 않고 다음 코드인 return tableData를 실행했기 때문이다
- 이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다.
```
console.log('hello');
setTimeout(function(){
	console.log('Bye');
}, 3000);
console.log('hello Again');
// hello
// hello Again
// 3초 후 Bye
```
- hello 출력 뒤 3초를 기다렸다가 Bye가 출력 되는 것이 아닌, hello를 읽고 Bye는 3초 뒤로 미루고 hello Again을 먼저 읽고 3초뒤에 Bye를 출력한다.

Callback 함수란?

다른 함수가 실행을 끝낸 뒤 실행되는, callback 되는 함수를 말한다.
JavaScript에서 함수는 Object이기 때문에 함수가 다른 함수의 인자로 쓰일 수도 반환 값이 될 수도 있다.
- 이러한 함수를 고차 함수라고 한다.
즉, 인자로 넘겨지는 함수를 콜백 함수라고 한다.
함수를 등록하기만 하고 특정 이벤트가 발생하거나 특정 시점에 도달 했을 때 시스템에서 호출하는 함수를 콜백함수라고 한다.

Callback 함수가 왜 필요한가?

JavaScript의 비동기 특성을 해결하기 위해 사용된다.
- JavaScript는 싱글 쓰레드 방식이기 때문에 코드를 한 줄씩 읽고 해석하는 인터프리터 언어이다.
예를 들어 Click Event나 setTimeout으로 클릭할 때, 혹은 $초 뒤에 특정 액션을 취해야 할 때 그 액션을 함수로 전달하게 되는데 이 때의 함수를 콜백함수라고 부르는 것이다.
따라서 Callback 함수가 왜 필요한가라는 질문 보다는 Callback 함수가 무엇이냐고 물어보는 것이 더 맞다.

Callback 함수는 무엇인가?

비동기 처리를 위해 특정 함수가 실행되고 난 뒤에 할 액션을 가리키는 함수를 Callback함수 라고 한다.
- 마우스 클릭 이벤트가 일어날 때 console.log('hi')를 실행한다고 했을 때 console.log('hi')를 실행하도록 지시하는 코드를 함수안에 넣어서 보내는데 이 함수를 콜백함수라고 부른다.

동기 처리와 비동기 처리

동기 처리는 …
- 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 말한다.
- 실행 순서가 보장된다는 장점이 있지만
- 앞에서 실행한 태스크가 종료될 때까지 이후 태스크들이 블로킹된다는 단점이 있다.
비동기 처리는 …
- 현재 실행중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식이다.
- 여러 개의 태스크를 동시에 처리할 수 있다.
  - 엄밀히 말하자면 동시에 처리하는 것은 아니고 짧은 시간 사이에 순차적으로 실행된다.
- 태스크의 실행 순서가 보장되지 않는다는 단점이 있다.