JavaScript 실행 이해: setTimeout 및 Promise를 사용하여 동기 및 비동기 동작 결정

JavaScript가 코드를 실행하는 방법 이해: 동기 및 비동기 패턴

JavaScript는 단일 스레드 언어입니다. 즉, 한 번에 한 줄의 코드를 실행합니다. 개발자에게는 동기 및 비동기 작업을 모두 처리하는 방법을 이해하는 것이 중요합니다. 종종 이 주제에 대한 질문이 기술 인터뷰에 등장하므로 이러한 개념을 철저하게 이해하는 것이 중요합니다.

개발자가 다음과 같은 기능을 사용할 때 setTimeout 또는 약속, 실행 흐름이 처음에는 다소 예측 불가능해 보일 수 있습니다. 그러나 명확한 구조를 따르면 코드의 다양한 부분이 실행되는 정확한 순서를 결정할 수 있습니다. 이는 특히 문제를 다룰 때 중요합니다. 콜백 그리고 이벤트 큐.

이 예에서는 JavaScript가 다음과 같은 동기 작업을 처리하는 방법을 분석합니다. 콘솔.로그 다음과 같은 비동기 작업 setTimeout 그리고 약속. 이 설명이 끝나면 JavaScript의 이벤트 루프가 작업의 우선 순위를 지정하고 처리하는 방법을 더 명확하게 이해하게 될 것입니다.

이 기사는 인터뷰 질문을 처리하거나 비동기 코드를 디버깅할 때 유용한 기술인 JavaScript의 실행 순서를 결정하는 데 도움을 주기 위해 작성되었습니다. 개념을 명확하게 설명하기 위해 실제 사례를 살펴보겠습니다.

JavaScript 실행 흐름 탐색: 동기 코드와 비동기 코드

JavaScript에서는 특히 코드를 처리할 때 동기 및 비동기 코드의 실행 순서를 이해하는 것이 필수적입니다. setTimeout 그리고 약속. 이해해야 할 핵심 개념은 이벤트 루프가 동기 작업을 먼저 처리한 다음 대기 중인 비동기 작업을 처리하는 방법입니다. 제공된 예제 코드에서 처음 두 로그("A" 및 "F")는 동기식입니다. 즉, 코드에 나타나는 정확한 순서대로 실행됩니다. 실행되는 순간 스크립트는 나중에 처리하기 위해 setTimeout과 같은 비동기 작업을 즉시 예약합니다.

setTimeout 함수는 작업을 연기하여 실행 흐름에 지연감을 주는 일반적인 방법입니다. 이 경우, 둘 다 setTimeout 함수는 이벤트 큐에 콘솔 로그 "B" 및 "E"를 추가하는 데 사용됩니다. "E"의 지연 시간은 0밀리초이지만 현재 동기 작업과 마이크로 작업이 완료된 후에도 여전히 대기열에 있다는 점에 유의하는 것이 중요합니다. 보다 복잡한 JavaScript 작업의 실행 순서를 결정하려면 이러한 미묘한 차이를 이해하는 것이 중요합니다.

첫 번째 내부 setTimeout 콜백의 경우 로그 "B"는 여전히 우선 순위를 갖는 동기 작업 대기열의 일부이므로 먼저 인쇄됩니다. 그런 다음 해당 콜백 내에서 해결된 약속이 생성됩니다. 약속.해결. 이는 로그 "D"가 "B" 다음이지만 기본 이벤트 큐의 다른 작업보다 먼저 발생하도록 하는 마이크로 작업을 트리거합니다. 마이크로태스크 대기열에 배치되는 Promise의 이러한 동작으로 인해 두 번째 setTimeout 콜백이 "E"를 기록하기 전에 "D"가 기록될 수 있습니다. 따라서 마이크로태스크는 표준 비동기 작업보다 우선순위가 높습니다.

최종 실행 순서를 요약하면 "A"와 "F"가 동기적으로 기록되고 그 뒤에 첫 번째 setTimeout에 의해 대기되는 "B"가 기록됩니다. 해결된 약속으로 인해 "D"가 다음에 마이크로태스크로 기록됩니다. 마지막으로 "E"는 두 번째 부분이므로 마지막에 기록됩니다. setTimeout 콜백. 동기 작업, 이벤트 루프 및 마이크로 작업을 결합하는 JavaScript의 실행 흐름에 대한 이러한 이해는 인터뷰 질문에 답하거나 실제 프로젝트에서 비동기 코드를 디버깅할 때 매우 중요합니다.

console.log("A");
setTimeout(() => {
    console.log("B");
    Promise.resolve("C").then(() => console.log("D"));
}, 1000);
setTimeout(() => console.log("E"), 0);
console.log("F");

console.log("Start");
setTimeout(() => {
    console.log("Middle");
}, 500);
Promise.resolve().then(() => {
    console.log("Promise 1");
});
console.log("End");

JavaScript의 이벤트 루프 및 작업 우선순위 지정에 대해 자세히 알아보기

JavaScript 비동기 동작의 핵심 측면은 다음과 같습니다. 이벤트 루프, 콜백, 약속 및 기타 비동기 코드의 실행을 처리합니다. 이 이벤트 루프는 콜 스택이 비어 있는지 지속적으로 확인하고 비어 있으면 콜백 큐와 마이크로태스크 큐의 작업을 처리합니다. 특히 처리 시 코드가 예상대로 작동하도록 하려면 이러한 대기열 내에서 작업의 우선 순위가 어떻게 지정되는지 이해하는 것이 중요합니다. setTimeout 그리고 동시에 약속한다.

마이크로태스크 대기열은 콜백 대기열보다 우선합니다. 다음과 같은 작업 결의안을 약속하다 이는 마이크로태스크 대기열에 배치됩니다. 즉, setTimeout의 지연 시간이 0인 경우에도 콜백 대기열에서 지연된 작업보다 먼저 실행됩니다. 이것이 코드 예제에서 Promise의 로그 "D"가 두 번째 setTimeout의 로그 "E"보다 먼저 실행되는 이유입니다. 예상치 못한 동작을 방지하기 위해 비동기 작업을 혼합하는 코드를 작성할 때 개발자가 이를 이해하는 것이 중요합니다.

실제 애플리케이션에서 API 호출이나 타이머와 같은 비동기 작업은 동기 코드와 상호 작용하는 경우가 많습니다. 이벤트 루프, 콜백 큐, 마이크로태스크 큐의 작동 방식을 알면 개발자는 코드 결과를 더 잘 예측할 수 있습니다. 이는 성능을 최적화하거나 두 가지가 모두 있는 복잡한 스크립트를 디버깅할 때 특히 중요합니다. 비동기 작업 동기 코드는 자주 상호 작용합니다.