자바스크립트 비동기

 콜백함수

함수에 파라미터로 들어가는 함수. 비동기이며 순차적으로 실행하고 싶을 때 사용.

ex. event listener, setTimeout

function first (params) { params()} // first() 실행 후 params() 실행

 

•  callback hell : 콜백함수가 너무 많이 중첩될 경우 코드의 가독성이 떨어짐, 에러 발생시 처리 어려움. 이를 해결하기 위해 promise 또는 async/await 사용

 

promise

promise((resolve, reject) => {비동기로 실행할 코드}) // resolve는 성공 코드, reject는 실패 코드

• .then{}
• .catch{} : error 처리 
• .finally{} : 모든 처리가 끝난 후 처리할 코드
• promise 체인 : .then으로 다중 코드 연결. callback hell을 더 간결하게 표현할 수 있는 방법이다. 이때 하나의 정보라도 누락되면 모든 코드가 작동하지 않음. 많은 코드가 연결될 경우 이 역시 가독성 문제가 발생 -> async/await 로 대체
• promise.all(array) : 비동기 작업 동시 시작
• promise.race : 비동기 작업 중 하나라도 완료되면 바로 .finally{} 실행

 

async/await

promise를 더 간결하게 작성, 동기적으로 보이게 하여 가독성 증가 

async function name() { resolve 함수} await delay 3000

•  throw : error 출력
• try{}, catch{}

 

event loop

event 처리 방법 

• stack : 실행할 함수 처리 
  • single thread이기 때문에 한 번에 하나씩만 처리.   
  • 만약 비동기, event-loop 등이 들어오면 이를 처리하기 까지 다음 코드가 실행되지 않는 문제 발생. 따라서 대기실로 이동시켜 실행을 보류한다.
• 대기실 : Ajax, event loop, 비동기 등이 우선 실행되지 않고 대기하는 공간
• Queue : 대기가 끝난 코드가 들어옴. 여기서 코드가 stack으로 다시 올라가는데, 이는 stack에 더 이상 실행할 코드가 없을때만 작동한다.