프론트엔드/Javascript 개념

콜백지옥과 프로미스

YunHyeong 2022. 2. 24. 21:23

 자바스크립트는 기본적으로 동기처리를 수행한다. 자바스크립트는 호이스팅(코드상에서 선언된 함수나 var 변수를 코드상 제일 위에 위치 시켜 순서대로 읽는 것)수행 이후 부터 코드를 순서대로 실행한다. 하지만 비동기처리는 코드의 순서에 크게 구애를 받지않고 정해진 함수를 처리하는 것을 말한다. 대표적으로 setTimeout함수가 있다. setTime함수는 일정 시간이 지나면 그 안에 있는 콜백함수를 실행시키기 때문에 코드 순서에 크게 상관없이 동작한다. 

 

Why Promise?

promise를 인터넷으로 영화를 예매하는 상황과 비유해보자면, 영화를 예매할 때 원하는 좌석을 누르면 영화예매에 성공한다. 하지만 만일 좌석이 없거나 원하는 좌석을 이미 다른 사람이 예약한 경우라면 예매가 불가능하다는 메세지를 소비자에게 전달해야 한다. 이 때 예매에 성공한 경우룰 resolve 콜백함수를 이용해 성공 소식을 알릴 수 있고, 실패한 경우는 reject함수를 이용해 메세지를 전달할 수 있다.  아래 코드에서 확인해보면, resolve콜백 함수는 결국 promise의 then함수와 연결되서 resolve의 인자값으로 'Success' 메세지를 보내면 콘솔에 출력 된다. 마찬가지로 reject함수는 Error 객체에 메시지 'Error'를 보내서 콘솔에 출력할 수 있다.

promise예제 코드

callback 함수와 promise의 연관성

promise는 callback함수로 인해 코드가 복잡해지는 것을 방지해준다. 아래 코드는 콜백 함수로 인해 코드가 복잡해진 경우다. promise를 이용하면 아래와 같은 상황을 방지할 수 있다.

'프론트엔드 > Javascript 개념' 카테고리의 다른 글

scope/hoisting  (0) 2022.05.17
이벤트 & 모듈  (0) 2022.04.23
protype & closer  (0) 2022.03.16
동기 처리 방식 vs 비동기 처리 방식  (0) 2021.08.07
async vs defer  (0) 2021.08.05