[javascript] setTimeout()은 무엇일까?

결과는 어떻게 될까요?

1 let num = 1;
2
3 setTimeout(() => {
4   num = 2;
5 }, 0);
6
7 num = 3;
8
9 console.log(num);

위의 코드가 동작하면 콘솔엔 어느 숫자가 찍힐까요?

콘솔에서 3이 보이게 됩니다.

이는 setTimeout() 함수가 비동기 함수이기 때문에 제일 마지막에 실행되기 때문인데요, 한줄씩 읽어보며 좀 더 정확히 알아보겠습니다.

---

코드 실행 순서

1번 줄에서 num 변수가 let타입으로 선언되고 동시에 숫자 1이 할당 됩니다.

3번 줄에서 setTimeout 함수가 실행이 되는데 콜백함수를 실행하기 때문에 그 다음에 있는 코드 부터 실행을 하게 됩니다.

따라서 7번에서 num 변수에 3이 할당이 되고
9번에서 console.log(num)이 실행되어 콘솔에 3이 보입니다.

그 후에 3번으로 돌아가서 콜백함수를 실행하여 4번에서 num에 2를 할당하고, 5번으로 내려가서 코드실행이 종료가 됩니다.

setTimeout()

    setTimeout함수는 원하는 시간만큼 코드의 실행을 지연시킬 수 있는 함수입니다. 따라서 지연되길 바라는 함수를 콜백함수로 넘기고, 두번째 인자로 지연시킬 시간을 ms단위로 적습니다.

// 예시 코드
setTimeout(()=> {
  console.log('5초 지연');
}, 5000)

// 코드실행 약 5초 후 
console
// 5초 지연

    먼저 봤던 코드에선 시간에 0 이라고 적혀있으니 지연되지 않고 즉시 실행될 것이라고 생각할 수 있습니다. 하지만 비동기 함수이기 때문에 함수 아래의 코드를 실행 시킨 후 콜백 함수를 실행시킵니다.

1  let num = 1;
2
3  setTimeout(() => {
4    num = 2;
5	 console.log(num);
6  }, 0);
7
8  num = 3;
9
10 console.log(num);


console
3
2

setTimeout() 내부에 console.log(num)으로 확인해보면 3 이후 2가 찍히는 것을 확인할 수 있습니다.

비동기 처리

    setTimeout()은 비동기 함수이기 때문에 다른 함수의 스택을 가로막지 않습니다. 코드를 그림으로 그리면 다음과 같습니다.

clearTimeout()

    setTimeout()을 예약해두었지만, 특정상황에서는 해당 실행을 취소해야할때가 있습니다. 그럴때 clearTimeout()을 이용하면 됩니다. setTimeout을 실행할때 타이머식별자(Timer Identifier)가 반환됩니다. 해당 ID를 통해 예약된 함수를 취소 할 수 있습니다.

let timerId = setTimeout(...);
clearTimeout(timerId);

참고사이트
MDN - setTimeout
https://ko.javascript.info/settimeout-setinterval