[JS] Promise 제대로 알기

KBS·2022년 1월 15일
0

Promise와 이를 사용하는 이유

Promise는 콜백함수 디자인패턴이 마음에 들지 않을때 Promise디자인 패턴을 사용하면 된다.
Promise는 자바스크립트의 새로운 기능이라기 보다는 코드/함수 디자인 패턴일 뿐이다.

var 프로미스 = new Promise();

프로미스.then(function() {

}).catch(function(){

});

프로미스 안의 코드가 실행이 완료 되었을때, then()함수 내의 코드가 실행된다.
코드가 실행이 실패했을 경우 catch()함수 내의 코드를 실행한다.

이런 식으로 코드를 차례로 실행할 수 있게 도와주는 디자인 패턴이 바로 Promise이다.

Promise가 콜백함수보다 좋다고 하는 이유에는 두가지가 있다.

  1. 콜백함수와는 다르게 순차적으로 뭔가를 실행할 때 코드가 옆으로 길어지지 않는다. then 함수를 붙여서 순차적으로 실행하기 때문
  2. 콜백함수는 불가능한 '실패시 특정 코드를 실행함'라고 코드를 짤 수 있다. (catch)

Promise의 몇가지 특징

  1. new Promise()로 생성된 변수를 콘솔창에 출력해보면 현재 상태를 알 수 있다.
    성공/실패 판정 전에는 \ 이라고 나오며
    성공 후엔 \
    실패 후엔\
    라고 나온다.

  2. Promise는 동기를 비동기로 만들어주는 코드가 아니다.
    Promise는 비동기적 실행과 전혀 상관이 없다. 그냥 코딩을 예쁘게 할 수 있는 일종의 디자인 패턴이다.
    예를들면.
    Promise 안에 10초 걸리는 어려운 연산을 시키면 10초동안 브라우저가 멈춘다.
    10초 걸리는 연산을 해결될 때 까지 대기실에 제껴두고 그런게 아니다.

(그냥 원래 자바스크립트는 평상시엔 동기적으로 실행이 되며 비동기 실행을 지원하는 특수한 함수들 덕분에 가끔 비동기적 실행이 될 뿐이다.)

profile
FE DEVELOPER

0개의 댓글