JS 프로미스 생성자 내부에 작성한 코드는 전부 비동기로 작동하는 것이 맞나요?

Question

안녕하세요 :)초보적인 질문이라 조금 부끄럽지만 검색해봐도 명확한 답변을 못 찾아서 질문드립니다.js에서 아주 간단하게 아래와 같은 프로미스 함수를 예를 들자면,prmsFC 함수가 비동기 함수가 되어 함수 내부의 const num &#61; 1 &#43; 2 ; 이 코드 또한 비동기로 동작하게 되는 건가요? 그래서 만약 const num &#61; 1 &#43; 2 ; 가 const a &#61; 1; , const b &#61; 2; 코드 보다 실행이 오래 걸린다면,순서가 const a &#61; 1; 실행 후, const b &#61; 2; 실행 후, const num &#61; 1 &#43; 2 ; 가 실행 되는 건가요? const prmsFC &#61; () &#61;> { return new Promise((resolve, reject) &#61;> { const num &#61; 1 &#43; 2; if (num &#61;&#61;&#61; 3){ resolve(num); }else{ reject('error') } }); }; const a &#61; 1; prmsFC() .then((value) &#61;> { console.log('success'); }) .catch(() &#61;> { console.log('fail'); }); const b &#61;2;

개발잡부 · Answer

const a+b 실행되고요청 날리고const a = 1실행되고const b = 1실행되고-----------------------이거 하는 와중에 응답이 오면 then/catch 실행

C-x C-e · Answer

질문하신 분은 JS의 코드실행순서를 이해하지 못하고 있습니다. 이 질문의 답은 JS의 엔진내부 구조에서 &#96;tick&#96; 개념을 이해해야 코드흐름의 타이밍을 이해할 수 있으며 단순히 '비동기'가 무엇이다 아는 것으로는 답을 이해할 수 없습니다. 간단히 말하자면, 동기코드가 먼저 실행되고 눈으로 보이는 Promise 구문은 실행 흐름에 있어 모두 다음번 tick에서 실행될 것입니다. 따라서 a 와 b가 먼저 설정되고, prmsFC() 안의 Promise 생성자가 실행된 후 .then()이 이어 받아 'success'가 표시됩니다.

HJOW · Answer

Promise 문법은, 어떤 로직을 비동기로 호출하려 쓰는 문법이 아닙니다.이미 비동기로 동작하는 로직을 보다 쉽게 통제(제어)할 수 있도록 탄생한 문법이죠.저 예제도 엄밀히 비동기 코드가 아닙니다.Promise 문법이 어떻게 동작하는지 알려줄 예제일 뿐저 코드 자체적으로는 모든 구문이 순서가 다 정해져 있으며, 블록되는 지점이 단 한 군데도 없습니다.(단순히 위 아래 순서가 안맞다고 비동기인 게 아닙니다.)그렇다면 비동기 호출이 발생하려면 어떤 일이 있어야 할까요?자바스크립트에서 쓰레드를 직접 생성할 수는 없으니뭐 setTimeout 이나 setInterval 을 썼다든지fetch 나 XMLHttpRequest 같은 얘들을 썼다든지 했겠죠?아님 이런얘들을 대신 호출해주는 써드파티 라이브러리 함수를 호출했다든지.

Tae-woong Kim · Answer

실제 동작const a = 1;이 실행됩니다.prmsFC()가 호출되면 프로미스 생성자 내부 코드가 즉시 실행됩니다.const num = 1 + 2;가 계산되고, resolve(num)이 호출됩니다.resolve 호출로 인해 .then() 콜백이 마이크로태스크 큐에 등록됩니다.const b = 2;가 실행됩니다.현재 실행 컨텍스트가 종료된 후, 마이크로태스크 큐의 콜백(console.log('success'))이 실행됩니다.실행순서는 위와 같으나 이런 예제코드로 공부를 하신다면 오히려 더 이해하기 어려운 것 같습니다. Promise 뿐만아니라 자바스크립트 실행 컨텍스트 및 이벤트 루프에 대해서 좀 더 알아보시는걸 권장합니다.

JS 프로미스 생성자 내부에 작성한 코드는 전부 비동기로 작동하는 것이 맞나요?

4개의 답변

Q&A 목록