서론
제목에는 거창하게 프로미스 객체와 프로미스 팩토리 함수의 차이점에 대한 정리라고 써놓긴 했는데
그냥 new 생성자를 이용한 프로미스 객체 생성과 프로미스 객체를 리턴하는 함수에 대한 차이점을
정리하려고 한다.
프로미스 함수란?
프로미스 팩토리 함수(프로미스 함수)란 프로미스 객체를 리턴해주는 함수를 의미한다.
샘플코드
const promise = () => {
return new Promise((resolve, reject) => {
// code...
});
}
어렵지 않다..
위와 같이 그냥 new Promise를 리턴해주면 된다..
code는 각자 필요한 비동기 작업을 작성해주면 된다..
일반 프로미스 객체와 프로미스 함수의 차이점
1. new 생성자를 통한 Promise 객체를 생성
//(1) Promise 객체 생성
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("통신 성공!");
}, 2000);
});
// 2초후... result: Promise {<fulfilled>: '통신 성공!'}
2. 프로미스 함수를 통한 Promise 객체를 생성
//(2) Promise 객체를 함수로 감싸서 함수 호출
const promise = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("통신 성공!");
}, 2000);
});
};
promise();
// 함수를 호출한 후 2초후... result: Promise {<fulfilled>: '통신 성공!'}
일반적인 프로미스 객체를 생성하는 경우와 프로미스 함수를 통한 프로미스 객체를 생성하는 경우에는
큰 차이점이 있다..
예전에 프로미스 관련 글을 썼을 때도, 정리를 헀지만
일반적으로 프로미스는 객체를 생성하면서 동시에 1번 프로미스가 실행이 된다.(중요)
하지만 프로미스 함수는 함수로 감싸져 있기 때문에 생성과는 무관하며
프로미스 함수를 호출함과 동시에 프로미스 객체를 생성하고 호출한다.(중요)
프로미스 함수는 왜 사용하는걸까?
실무에서는 프로미스를 사용할 때, 함수로 감싸서 사용하는 일이 많은데
이러한 이유로는 아래와 같은 이유가 있다.
1. 확장성
프로미스 함수 호출시 인자를 넘겨 동적으로 프로미스 객체를 생성할 수 있다.
2. 재사용성
프로미스 함수를 호출만 함으로써 여러 곳에서 프로미스 객체를 리턴 받을 수 있으며, 따로 프로미스 객체
생성 코드를 작성하지 않아도 된다.
3. 가독성
코드 구분이 명확해져(then, catch와 같은 구문..) 코드 가독성이 올라간다.
이러한 이유들도 인해, axios와 같은 라이브러리와 fetch API등에서 프로미스 객체 기반의
함수로 제공되고 있다.
fetch API 코드를 예로 들자면... 아래와 같을 수 있다..
샘플코드
fetch("https://bongra.tistory.com/").then((result) => {
console.log(result);
});
//(1) promise 생성자를 사용하지 않고 함수를 호출함으로써 코드 재사용성이 높음
//(2) url(인자)를 동적으로 변경할 수 있어 확장성이 높음
//(3) then과 같은 구문으로 가독성이 올라감
예전에 너무 대충 공부해서 계속 까먹고 헷갈리니 계속 공부해야겠다...
'FrontEnd > JavaScript' 카테고리의 다른 글
[JS] javascript에서 로직 실행시간을 측정하는 방법 ( feat. console.time 함수 사용 ) (0) | 2024.01.27 |
---|---|
[JS] 프로미스(Promise) 객체를 생성하는 여러가지 방법 (0) | 2024.01.27 |
[JS] javascript에서 IIFE(Immediately Invoked Function Expression)패턴이란? (0) | 2024.01.22 |
[JS] javascript에서 원시타입(primitive)은 어떻게 함수를 사용할 수 있는 것일까? ( 원시타입의 객체화 ) (0) | 2024.01.19 |
[JS] 원시타입(primitive) VS 참조타입(reference)의 차이점 (1) (0) | 2024.01.19 |