JS의 핵심 Promise+Plus

Promise는 클래스다. Promise의 객체는 비동기의 작업(task) 결과를 나타낸다.

기본 Promise의 구조

1)

function print() {   const print = new Promise((res) => {     res("res");   })   return print; }

2)

function print() {   return new Promise((res) => {     res("res");   }) }

const printer = print(); printer.then(console.log('print'));

3)

const print = new Promise((res) => {   res("res"); }) print.then(success => { console.log(success) })

success에는 print(해당 비동기)의 비동기 작업이 성공한 경우 resolve(res)가 success에 값을 제공해준다. 다시말해 비동기 작업이 성공하면 .then구문의 success가 res값을 받아 프린트 된다는 것이다.

 여기서 우리가 집중해서 봐야하는 것은 함수로 이루어진 1)promise와 3)화살표 표기로 이루어진 함수이다. 1)함수로 이루어진 promise는 return이 없이 함수가 정의되는 순간 오류가 발생하나.하지만 3)의 함수는 문제가 없다 그 이유는 바로 화발표함수 안에서 return문이 유일하다면 중괄호와 return이 생략되면서 마지막 3)과 같은 표기가 이루어 지는 것이다. 다시 말해서 1)에서부터 3)은 형태와 promise인 생성자 객체를 다루는 방식과 접근이 다를 뿐 결과는 모두 같다. 

화살표 함수 - JavaScript | MDN

 위의 설명이 화살표기법을 중심으로 이야기한 것 같지만 조금 더 생각해보면 클래스의 생성자가 어디에 어떻게 담겼는지 였볼 수 있다. 1)번의 함수는 함수를 선언하면서 print라는 변수에 promise를 반환하는 구조이다. 객체를 생성하고 이를 print에 promise 반환된 값을 담은 것이다. 따라서 함수의 기능을 수행하면서 반환값 return을 사용함으로 promise가 반환한 값을 함수로 반환하는 구조이다. (반환이 두번 이루어지는 구조이다. new Promise와 return.)그래야 const printer라는 변수에 함수의 반환값을 담을 수 있기 때문이다. 3)번은 1)번의 함수를 완전히 탈환해서 const print에 promise를 할당한 것이다. 즉, print가 곧 promise인 것이다,.그리고 return이 없는 이유는 위에 설명했 듯 생략이 된것이다.

Promise는 비동기 작업을 처리하기 위한 객체이다. Promise의 객체를 사용해서 성공여부를 판단하고 진행상태를 확인 할 수 있다. 

링크를 통해 재미있는 예제를 확인 할 수 있었다.

자바스크립트 Promise 예제를 통해 쉽게 이해하기

Promise - JavaScript | MDN