동기 작업과 비동기 작업

동기작업 : 하나의 작업을 실행하고 마친 뒤에 다음 작업을 순차적으로 실행(블로킹)

비동기 작업: 메인 흐름은 멈추지 않은 상태에서 특정 작업들을 백그라운드에서 처리하여 동시에 처리하는 것처럼 실행됨(넌블로킹)

• 비동기 작업을 할 때 가장 많이 사용하는 방식이 콜백 함수를 이용하는 방식

Callback 처리 시 주의할 점

비동기 처리를 하기 위한 흔한 방법은 콜백 함수를 이용하는 것

하지만 특정 비동기 처리 이후 수행할 내용을 또 정의해야 하는 경우 콜백함수의 중첩이 생기고 이러한 것들이 많이 추가되면 콜백 지옥이 펼쳐짐

function increase(number, callback) {
  setTimeout(() => {
    const result = number + 10;

    if(callback) {
        callback(result);
    }
  }, 1000);
}

/* 단순히 한번 정도는 난해하진 않다. */
increase(0, result => console.log(result));

여러번 순차적으로 결과들을 콜백 함수로 던지기 위해서는 중첩을 사용해서 호출 가능함

• 하지만 이러한 형태는 가독성도 좋지 않고 유지보수도 힘든 피해야 하는 패턴임

console.log('start...');
increase(0, result => {
    console.log(result);
    increase(result, result => {
        console.log(result);
        increase(result, result => {
            console.log(result);
            increase(result, result => {
                console.log(result);
                increase(result, result => {
                    console.log(result);
                    console.log('end');
                });
            });
        });
    });
});

console.log('메인')

Promise

왜 Promise 객체를 사용하는가?

1. 비동기 처리 함수를 실행 시 성공, 실패에 대한 처리가 용이하게 resolve 및 reject 제공
2. 해당 객체가 제공하는 메소드를 사용하기 위함
   • 가독성이 좋고 메소드 체이닝 방식 제공함