자바스크립트는 싱글 스레드 언어로 한 번에 한 가지 작업만 처리한다.

싱글 스레드는 작업을 요청한 이후 그 작업이 끝날 때까지 다음 작업은 진행할 수 없다. 통신 과정에서 데이터를 보낸 이후에 답이 없다면 멈춰버리는 현상이 발생한다.

하지만 웹개발에서는 네트워크 요청 등의 작업이 필요한 경우가 많은데 이러한 작업들은 시간이 오래 걸리거나 결과가 불확실하다.
그래서 자바스크립트는 비동기 방식으로 작업을 처리하는 기법을 제공하며 대표적인 방법이 콜백 함수나 프로미스이다.

Callback이란?

자바스크립트에서 비동기 처리를 구현하는 일반적인 방법 중 하나.

함수의 인자로 전달된 함수로, 함수가 실행을 끝낸 뒤에 실행되는 함수.

function main(x) {
	x();	
}
function sub() {
	console.log('Hello!');
}
main(sub);

// console 실행결과 : Hello!

화살표 함수나 익명 함수로도 사용할 수 있다.

function main(x) {
	x();
}
// 화살표 함수
main(() => {
	console.log('Hello!');
})
// 익명 함수
main(function(){
	console.log('Hello!');
})

--> sub라는 콜백함수를 main 함수에 전달하여 main 함수 내부에서 호출.

동기적으로 콜백함수를 호출하면, 해당 함수의 실행이 끝날 때까지 다음 코드의 실행을 멈춘다.

비동기적 콜백 함수는 비동기 작업이 완료되면 즉시 실행되지 않을 수 있어 다른 작업을 수행할 수 있다.

콜백함수를 사용하는 이유

비동기 처리, 이벤트 처리
동기적인 콜백함수를 사용하면 코드의 실행 순서를 보장할 수 있다.

비동기적인 콜백함수를 사용하면 코드의 실행 속도를 높일 수 있으며 애플리케이션의 응답성을 향상시킬 수 있다. 하지만 동기적인 코드 보다 복잡하며 코드의 실행순서를 파악하기 어렵다.

콜백 함수의 사용예시

1. 이벤트 리스너로 사용

addEventListener는 특정 이벤트가 발생했을 때, 콜백 함수를 실행하는 메서드이다.
클릭과 같은 이벤트를 처리하기 위해 등록하는 이벤트 리스너로 콜백함수를 사용한다.

const button = document.getElementByClass("button");

button.addEventListner("click", function() {
	console.log("click");
})

2. Ajax 결과값을 받을 때 사용

서버와 데이터를 주고 받을 때 사용하는 fetch 메서드의 서버 요청의 결과값을 처리하기 위해 콜백함수를 사용한다.

fetch("https://....")
	.then(function(response) {
    	// fetch 메서드가 성공하면 콜백함수로 response 인자를 받음
    	return response.json();
    })
	.then(function(response){
  		// json 메서드가 성공하면 콜백함수로 data 인자를 받음
		console.log(data);
	})

3. 타이머 실행 함수로 사용

setTimeout 이나 setInterval 과 같은 타이머 함수에 일정 시간마다 스크립트를 실행하는 용도로 콜백함수를 사용한다.

setTimeout(function(){
	console.log("Time is up!");
}, 3000);

콜백함수의 단점

1. 콜백 지옥 (Callback Hell)

함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 중첩이 깊어지는 현상이다.

---

Promise란?

자바스크립트 비동기 처리에 사용되는 객체.

콜백 지옥을 해결하는 방안으로 ES6에 도입된 기능이다.

함수를 인자로 받으며 인자로 들어온 함수는 다시 resolve, reject 2개의 함수를 인자로 받게된다.
reslove (비동기 처리 성공) 시, then 메서드
reject (비동기 처리 실패) 시, catch 메서드의 인자로 넘어간다.

Promise를 사용하는 이유

프로미스가 콜백을 대체하는 것은 아니지만, 콜백을 예측 가능한 패턴으로 사용할 수 있게한다.

---

Callback과 Promise의 차이점

콜백함수는 비동기 로직의 결과 값을 처리하기 위해서 콜백 안에서만 처리를 해야하고 콜백 밖에서는 비동기에서 온 값을 알 수 없다.

프로미스는 비동기에서 온 값이 프로미스 객체에 저장되기 때문에 코드 작성이 용이하다.