callback과 Promise

callback

함수의 인자값으로 함수를 받아 해당 함수에 인자값을 전달하면서 로직을 수행하는 방법이라 할 수 있습니다.

function add10(a, callback){
	setTimeout(()=>callback(a+10), 100);
}
add10(5, log); // 15

• 물론 비동기적으로 수행되기 때문에 하단에 즉시 수행되는 로직(ex:log('hi"))라도 있으면 해당 메서드가 먼저 호출될 것입니다.

Promise

callback과 가장 큰 차이점중 하나는 Promise객체를 반환한다는 것입니다.

function add20(a) {
    return new Promise(resolve => setTimeout(() => resolve(a + 20), 100));
}

add20(5)
    .then(log)//25

• return 당시에는 Promise타입 객체를 반환하며 .then 메소드를 통해 내부의 값을 꺼내어 사용합니다.

차이점

1. callback은 함수를 인자로 받아 수행하는 반면, Promise는 Promise객체를 반환합니다. 로직이 수행되는 주체가 다릅니다.

2. Code Depth가 callback의 경우 계속해서 증가하는 반면 Promise 의 경우 1 Depth에서 더이상 깊어지지 않습니다.

   //callback
   add10(5, res=>{
       add10(res, res=>{//1_depth
           add10(res, res=>{//2_depth
               add10(res, res=>{//3_depth
                   log(res);
               })
           })
       })
   });
   
   //Promise
   add20(5)
       .then(add20)//1_depth
       .then(add20)//1_depth
       .then(add20)//1_depth
       .then(add20)//1_depth
       .then(log);//1_depth
   

비동기 값으로 만드는 Promise