[JavaScript] 비동기 작업 - setTimeout(), 콜백함수

이번 글은 비동기 함수의 작동원리와 비동기 작업 시 사용되는 setTimeout()과 콜백함수에 대한 글이다.

 

---

 

 

[ 동기와 비동기 ]

동기는 여러 작업을 순서대로 한번에 하나씩 처리하는 것이고 JavaScript의 일반적인 실행 구조이다.

비동기는 여러개의 작업이 주어졌을 때 앞선 작업이 종료되지 않아도 기다릴 필요 없이 다른 작업을 실행하는 것으로 setTimeout()등의 내장함수를 통해 실행할 수 있다.

 

 

---

 

 

[ setTimeout함수 ]

비동기 구조로 실행하는 역할을 하는 setTimeout()은 인수로 받은 시간만큼 대기 한 후 콜백함수를 실행하는 형태이다.

코드를 일정 시간 이후 비동기적으로 실행하는 역할을 한다.

setTimeout(콜백함수, 시간)

 

아래 코드와 코드의 실행결과를 보면 setTimeout()이 중간에 삽입되어져 있으므로 해당 부분의 코드를 생략하고 1과 3을 먼저 출력한 후 3초 뒤에 2가 출력되는 것을 확인할 수 있다.

이때 setTimeout()의 타이머는 ms 기준이다.

console.log(1);

setTimeout(() => {
  console.log(2);
}, 3000);

console.log(3);

 

실행결과

 

 

---

 

 

[ 비동기 작동 방식 ]

JavaScript는 스레드가 하나이지만 WebAPIs로 동시에 여러 작업이 가능하다.

WebAPIs란 웹 브라우저가 직접 관리하는 별도의 영역으로 비동기 작업 시 여기에서 따로 실행된다.

작동방식은 다음과 같다.

• JavaScript 엔진이 비동기 함수를 만나면 해당 함수의 타이머와 콜백함수를 WebAPIs에 넘긴다.
• JavaScript 엔진은 다시 진행하던 코드를 마저 진행한다.
• Web APIs에서 타이머가 완료되면 콜백함수를 다시 JavaScript엔진에 돌려준 뒤 이를 실행한다.

 

비동기 작업을 하는 함수의 결과값을 이 함수의 외부에서 사용하고 싶다면 => 매개변수로 콜백함수를 넣어준 뒤 setTimeout()에서 호출하고 인수로 결과값을 전달해준다.

 

비동기 작업의 결과를 또 다른 비동기 작업의 인수로 전달하는 것 또한 가능하다.

 

---