자바스크립트 ES6 Promise를 통한 비동기 프로그래밍

자바스크립트의 코드는 기본적으로 싱글스레드 기반 비동기 방식의 언어이다.

때문에 아래와 같은 코드가 있다고 가정해보자.

console.log(1);

console.log(2);

기존 C등의 절차지향 언어를 접하다 온 사람은 무조건 1이 찍히고 2가 찍힌다고 생각할 것이다.

하지만 실제로는 console.log(1), console.log(2) 가 동시에 실행되는 것이기 때문에

실행순서를 예측할 수 없다.

프로그램을 설계하다 보면 반드시 특정 함수가 실행된 후 또다른 함수가 실행되어야 하는 경우가 존재한다.

한마디로 비동기 프로그래밍을 동기 프로그래밍처럼 동작하도록 바꿔줘야 한다는 말인데,

자바스크립트에서는 이러한 상황을 콜백함수(Callback function)를 통해 해결한다.

하지만 콜백을 너무 남발하다보면 콜백 지옥에 빠지게 된다.

콜백 지옥이란 아래와 같은 코드이다.

function a(a1, callback) {}

function b(b2, callback) {}

function c(c3, callback) {}

function run(a1, callback) {

a(a1, function(b2) {

b(b2, function(c3) {

c(c3, function(result) {

callback(result);

});

});

});

}

한마디로 콜백에 다시 콜백을 주고 연속적으로 체이닝해가는 것인데

가독성이 좋지 않을 뿐만 아니라 각 코드의 실행에 대한 신뢰성이 없다.

이러한 문제를 어느정도 해결하기 위해 자바스크립트 ES6부터 Promise란 것을 지원한다.

위 콜백 지옥의 코드를 Promise를 통해 다시 표현해보자면 아래와 같다.

function a(a1, callback) {console.log('a')}

function b(b2, callback) {console.log('b')}

function c(c3, callback) {console.log('c')}

function run(a1) {

return a(a1)

.then(b2 => b(b2))

.then(c3 => c(c3))

}

코드수가 많이 줄었기 때문에 가독성이 좋아졌다.

뿐만 아니라 .then은 이전 함수가 완벽하게 실행된 후 실행이 되기 때문에

각 라인 별 코드의 신뢰성도 좋아진 걸 볼 수 있다.

위 코드는 a() 함수가 실행된 후, .then을 통해 b() 함수를 실행,

마찬가지로 b() 함수의 실행이 끝난 후 .then을 통해 c() 함수를 실행해주는 예제이다.

기존에 작업했을 때 ajax로 많은 통신을 했었는데 콜백에 콜백을 계속 이어가다보니

코드도 복잡해지고 유지보수할 때 상당히 애를 먹었던 기억이 있다.

ES6부터 도입된 Promise를 통해 이 부분을 상당히 완화시킬 수 있을 것 같다.

참고 : http://meetup.toast.com/posts/73