[JS] 비동기 실행 함수 예제

비동기 실행이란?

특정작업을 시작하고 마무리 되기 전에 다음 코드로 넘어간 후, 나중에 콜백이 실행되는 것을 비동기 실행이라고 한다. 반면 한 번 시작한 작업을 모두 처리하고 난 후 다음 코드로 넘어가는 것은 동기 실행이라고 한다.

예를 들어 다음과 같은 코드가 있을 때,

console.log('Start!');

fetch('https://www.google.com')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

console.log('End');

콘솔에는 'Start!' -> 'End' -> result 순으로 출력된다. fetch 함수의 경우 비동기 실행 함수이기 때문에 아래와 같은 과정을 거친다.

1. 'Start!' 출력
2. fetch 함수를 통해 리퀘스트를 보낸다. 리스폰스를 받았을 때 실행할 콜백을 등록만 한다.
3. 'End' 출력
4. 리스폰스가 왔을 때 2에서 등록한 콜백을 실행한다.

비동기 실행 함수 사례

JS에는 위와 같은 fetch 함수 이외에도, 비동기 실행을 하는 몇가지 함수가 있다.

setTimeout

특정 함수의 실행을 원하는 시간만큼 미뤄주는 함수

console.log('a');
setTimeout(() => { console.log('b'); }, 2000);
console.log('c');

/*
a 와 c 를 먼저 출력 하고, 2000밀리초(2초) 후에 b 를 출력한다.

setInterval 함수

특정 함수의 실행을 원하는 시간 간격으로 반복해주는 함수

console.log('a');
setInterval(() => { console.log('b'); }, 2000);
console.log('c');

/*
a 와 c 를 먼저 출력 하고, 2000밀리초(2초) 간격으로 반복하여 b 를 출력한다.

addEventListener

addEventListener 역시 바로 콜백 함수가 실행되는 것이 아닌, 이벤트가 발생했을 때 콜백함수가 실행되므로 비동기 실행 함수이다.

문제 코드의 흐름 알아보기

아래와 같은 코드를 작성했을 때, 콘솔에 출력되는 값과 그 이유를 설명하시오.

// 1번
let num = 1;

// 2번
setTimeout(() => {
  num = 2;
}, 0);

// 3번
num = 3;

// 4번
console.log(num);

• 1번 : let 키워드를 사용하여 나중에 재할당이 가능한 변수 num에 1을 저장해주었다.
• 2번 : setTimeout 함수를 사용하여 콜백을 등록(지금 실행X, 나중 실행)하였다.
  --> 등록한 콜백의 동작은 num을 2로 재할당 하는 것이며, 0밀리초의 시간 후에 동작되도록 하였다.
• 3번 : num을 3으로 재할당 하였다.
• 4번 : 현재까지의 동작으로 할당되어있는 num의 값을 출력한다.

결과적으로 4번 코드에 의해 콘솔에 출력되는 값은 3이다.
비동기 실행 함수인 setTimeout의 경우 위의 예제에서 본 것 처럼 setTimeout 등록 이후의 코드가 모두 실행된 이후 등록한 콜백이 실행된다. 그러므로 2번에서는 아직 num을 2로 재할당하지 않은 것이고, 3번 코드에서 재할당한 것이 유효하다.

따라서 콘솔에 3이 출력된 직후(0밀리초가 지난 이후) num이 2로 재할당된다.