비동기
특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성입니다.
비동기 처리를 위해 콜백 함수, 프로미스 및 async/await 함수를 제공하여, 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있습니다.
콜백 함수
다른 함수가 실행을 끝낸 뒤 실행되는 함수입니다. 다른 코드에 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다.
Promise
프로미스는 자바스크립트 비동기 작업을 처리하는 객체로 es6에 도입된 기능입니다.
‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 특징’이 있습니다.
성공한 경우 resolve 를 호출해 결과를 반환하고, 실패한 경우 reject를 호출해 에러를 반환하며, 콜백지옥의 문제점을 해결할 수 있습니다.
new Promise()로 프로미스를 생성하고 종료될 때까지 pending, fulfilled, rejected의 3가지 상태를 갖습니다.
Promise의 상태
new Promise()로 프로미스를 생성하고 종료될 때까지 pending, fulfilled, rejected의 3가지 상태를 갖습니다.- Promise는 최초로 생성되어 비동기 처리 로직이 아직 완료되지 않은 상태를 ‘Pending(대기)’ 상태라 합니다.
- 비동기 처리가 완료되어 프로미스 결과값을 반환해준 상태를 Fulfilled(이행)상태라 합니다.
- 비동기 처리가 실패하거나 오류가 발생한 상태는 Rejected(실패) 상태입니다.
async/await 함수
async/await 함수는 JavaScript의 최신 기능 중 (ES8) 하나로 promise를 쉽게 사용할 수 있도록 해줍니다.
기존 동기식 처리의 단점을 보완하고 가독성을 높혀주는 코드를 만들 수 있습니다.
async 함수는 항상 프로미스를 반환하며, await 키워드를 사용하여 비동기 작업의 완료를 기다립니다.
async 함수에서 에러를 발생시킬 때는 throw를 사용하고, 에러를 잡아낼 때에는 try/catch 문을 사용합니다.
promise와 async/await의 차이점
에러핸들링과 코드 가독성 두가지 측면에서 차이점이 있습니다.
먼저 promise는 catch()메소드를 이용해 에러핸들링을 하고, async/awiat는 에러 핸들링 대신 try-catch()문을 활용합니다.
또, promise의 경우 .then()으로 결과를 반환하다보니 코드의 가독성이 좋지 않은데 비해, async/await의 경우 코드의 흐름을 읽기 쉬우며 가독성이 좋습니다.
이벤트 루프
이벤트 루프는 실행 대기 중인 비동기 함수가 있으면 해당 함수를 호출하고, 실행이 완료될 때까지 다음 비동기 함수를 호출합니다. 따라서, 여러 개의 비동기 함수가 실행될 때 이들 함수는 동시에 실행되며, 이벤트 루프에 의해 비동기 함수의 실행 순서가 제어됩니다.
[참고] https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/
