Callback이란?

callback 함수는 함수의 매개변수인 함수입니다. 주로 비동기 처리에서 동기 처리를 할 때 callback 패턴을 사용합니다. callback 함수는 중첩될수록 가독성이 심하게 저하되는 문제점이 있습니다.

const add1 = (number, callback) => { setTimeout(() => callback(number + 1), 1000); };

const add2 = (number, callback) => { setTimeout(() => callback(number + 2), 1000); };

const add3 = (number, callback) => { setTimeout(() => callback(number + 3), 1000); }

const log = (number) => { console.log(number); }

add1(0, (number) => add2(number, (number) => add3(number, log)));

//add1 -> 1초뒤 -> add2 -> 1초뒤 -> add3 -> 1초뒤 -> log

위 코드는 callback 패턴을 이용하여 비동기 처리를 한 것이다. 이렇게 callback 패턴을 이용하여 코드를 짤 경우에 가독성 뿐 아니라 유지보수 또한 어렵다.

Promise란?

promise는 자바스크립트에서 비동기를 간편하게 처리해주는 클래스입니다. 여기서 비동기처리는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것을 말합니다.

실행에 오랜 실행 시간이 걸리는 실행문들은 비동기로 처리하여 전송을 보내고 응답을 받으면 실행 되게 할 수 있습니다. 이러한 비동기 처리를 위해 사용하는 것이 promise이며 instance 객체를 만들어 parameters로 resolve, reject, callback 함수들을 사용하여 조건에 따라 동기처리를 합니다.

const add1 = number => new Promise(resolve => setTimeout(() => { resolve(number + 1); }, 1000), );

const add2 = number => new Promise(resolve => setTimeout(() => { resolve(number + 2); }, 1000), );

const add3 = number => new Promise(resolve => setTimeout(() => { resolve(number + 3); }, 1000), );

const log = number => new Promise(resolve => setTimeout(() => console.log(number), 1000));

add1(0) 
  .then(number => add2(number))
  .then(number => add3(number)) 
  .then(number => log(number));

//add1 -> 1초뒤 -> add2 -> 1초뒤 -> add3 -> 1초뒤 -> log

es6의 Promise는 이렇게 가독성 좋은 코드를 짤 수 있을 뿐 아니라 비동기 작업을 좀 더 유연하게 처리할 수 있다.

Promise의 상태

Promise는 객체이다. 비동기 작업의 상황을 pending, fulfilled, rejected 3가지 상태로 묘사하고 값으로 할당이 가능한 객체의 형태로 표현된다.

• pending: 비동기 처리가 아직 수행되지 않은 상태

• fulfilled: 비동기 처리가 수행된 상태(성공)

• rejected: 비동기 처리가 수행된 상태(실패)