[JS] Callback과 Promise

비동기 처리를 위한 도구 Callback과 Promise

JS에서 비동기 처리를 위한 도구로 Callback과 Promise를 이용한다.

• callback형식

function add10(a, callback) {

  setTimeout(() => callback(a + 10), 100);
};

add10(5, res => {})

• Promise

function add20(a) {
	return new Promise(resolve => resolve(a + 20); 
}
add20(5).then(console.log)

callback과 Promise의 차이점

callback과 promise의 차이점은 크게 두가지가 있다.

연속적으로 사용했을 때, Promise가 callback보다 더 깔끔하다.

callback의 경우 아래의 예시처럼 연속적으로 사용했을 때, callback Hell이라고 불리는 모습이 나타난다.

add10(5, res => {
	add10(res, res1 => {
    	add10(res1, res2 => {
         // ... 
        }
    }
})

너무 많은 intent들이 있어서 코드를 읽기가 어렵다.
반면에, Promise는 chaining이 가능하여 상대적으로 코드를 읽기 쉽다.

add20(5).then(add20).then(add20)

callback은 비동기를 코드와 컨텍스트로 처리하고 Promise는 비동기를 일급으로 처리한다.

가장 흥미로운 부분이었다.
callback의 경우, 비동기를 비동기가 실행될 때에 처리를 코드와 컨텍스트로 처리를 한다. 그렇기에 비동기처리가 제한적이다.
하지만 Promise의 경우 pending, resolve, reject와 같이 일급(값)으로 처리하기 때문에, function의 argument로 넘겨 처리하기 용이하다.
위와 같은 특성때문에, JS에서 비동기를 함수형 프로그래밍기법으로 처리하기 쉬워진다.

함수형 프로그래밍과 Javascript ES6+ (인프런 강좌)