setTimeout 시간 0으로 설정하는 이유

setTimeout이란?

전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다.

//예시 코드
setTimeout(function() {
    console.log("Hello, world!");
}, 3000);

1000이 1초로 위 코드는 3초 뒤에 hello world가 콘솔에 찍히게 됩니다.
사용 예시로는 사용자 인터렉션, 쓰로틀링, 토스트메세지 구성, 애니메이션 구성 등이 있을 것같습니다.

출처: https://developer.mozilla.org/ko/docs/Web/API/setTimeout

셋타임아웃 시간 0으로 설정하기

1. 스크립트 실행 종류 직후에 특정 함수 더 빠르게 실행

setTimeout(func, 0)이나 setTimeout(func)을 사용하면 setTimeout의 대기 시간을 0으로 설정할 수 있습니다.

이렇게 대기 시간을 0으로 설정하면 func을 ‘가능한 한’ 빨리 실행할 수 있습니다. 다만, 이때 스케줄러는 현재 실행 중인 스크립트의 처리가 종료된 이후에 스케줄링한 함수를 실행합니다.

이런 특징을 이용하면 현재 스크립트의 실행이 종료된 ‘직후에’ 원하는 함수가 실행될 수 있게 할 수 있습니다.

출처 :https://ko.javascript.info/settimeout-setinterval

• 스케줄러란? 한정적인 메모리를 여러 프로세스가 효율적으로 사용할 수 있도록 다음 실행 시간에 실행할 수 있는 프로세스 중에 하나를 선택하는 역할

• 스케줄러 더 알아보기: https://dheldh77.tistory.com/entry/%EC%9A%B4%EC%98%81%EC%B2%B4%EC%A0%9C-%EC%8A%A4%EC%BC%80%EC%A4%84%EB%9F%ACScheduler

2. 일부 작업을 다른 이벤트 루프 사이클로 옮겨서 비동기적으로 처리

setTimeout 함수에 시간을 0으로 설정하는 것은 자바스크립트에서 일부 작업을 다른 이벤트 루프 사이클로 옮겨서 비동기적으로 처리하는 기술입니다. 이를 "0ms 딜레이" 또는 "태스크 큐"에 추가한다고 합니다. 이렇게 함으로써 다음 이벤트 루프 사이클에서 실행될 수 있게 됩니다.

일반적으로 브라우저에서는 모든 작업이 메인 스레드에서 처리됩니다. 이것은 사용자 인터랙션에 반응하는 것부터 네트워크 요청을 보내고, DOM 조작, 스크립트 실행 등을 포함합니다. 따라서 한 번에 많은 작업이 큐에 쌓이게 되면, 이러한 작업이 모두 처리될 때까지 브라우저는 다음 작업을 수행하지 못합니다. 이것은 사용자 경험을 저하시킬 수 있습니다.

시간을 0으로 설정하면 작업이 즉시 큐에 추가되지만, 현재 이벤트 루프가 완료된 후에 처리됩니다. 따라서 현재 작업을 중단하지 않고도 브라우저에게 다음 이벤트 루프 사이클에서 작업을 수행하도록 할 수 있습니다. 이는 특히 비동기적으로 실행되어야 하지만, 작업의 우선순위가 높지 않은 경우 유용합니다.

*큐란? Queue는 FIFO(First In First Out) 원칙을 따르는 데이터 저장 방식의 자료구조
+큐 더 알아보기 :https://velog.io/@hanei100/CS-Stack%EA%B3%BC-Queue