자바스크립트 싱글 스레드와 예시

자바스크립트는 프론트엔드 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 이 언어의 특징 중 하나는 싱글 스레드(single-threaded)라는 점입니다. 이 블로그에서는 자바스크립트의 싱글 스레드 동작 메커니즘에 대해 살펴보고, 예시를 통해 이를 더욱 잘 이해해보도록 하겠습니다.

싱글 스레드란?

싱글 스레드는 단일 실행 컨텍스트(single execution context)에서 작업이 순차적으로 처리되는 프로그래밍 모델을 의미합니다. 다른 말로 하면, 자바스크립트는 한 번에 하나의 작업만 처리할 수 있습니다. 이는 자바스크립트의 동기적(synchronous) 특성을 의미합니다. 따라서 한 번에 한 가지 작업만 처리하므로, 여러 작업을 동시에 실행시킬 수 없습니다.

싱글 스레드의 동작 방식

자바스크립트 싱글 스레드는 이벤트 루프(event loop)와 호출 스택(call stack)을 기반으로 동작합니다. 호출 스택은 현재 실행 중인 함수의 컨텍스트를 저장하는 자료구조입니다. 이벤트 루프는 호출 스택이 비어있을 때, 이벤트 큐에서 다음 작업을 가져와 호출 스택에 추가하는 역할을 합니다.

싱글 스레드 예시

싱글 스레드의 동작 방식을 예시를 통해 이해해보겠습니다.

예시 1: setTimeout()

다음의 예시는 setTimeout() 함수를 사용하여 3초 후에 메시지를 출력하는 코드입니다:

    
function showMessage() {
  console.log("Hello, world!");
}

console.log("Start");
setTimeout(showMessage, 3000);
console.log("End");
    
  

이 예시를 실행하면, 다음과 같은 결과를 얻을 수 있습니다:

    
Start
End
Hello, world!
    
  

위의 코드에서 setTimeout()은 비동기적(Asynchronous)으로 동작합니다. 3초간의 지연(delay) 후에 showMessage() 함수가 호출되고, 해당 함수의 실행이 완료되면 호출 스택에서 제거됩니다. 이러한 비동기적 동작으로 인해 "Start"와 "End"는 먼저 출력되고, 3초 뒤에 "Hello, world!"가 출력됩니다.

예시 2: 사용자 이벤트 처리

다음은 버튼 클릭과 같은 사용자 이벤트를 처리하는 예시입니다:

    
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button clicked!");
});
    
  

위의 코드는 사용자가 버튼을 클릭할 때마다 "Button clicked!" 메시지를 출력합니다. 이벤트 처리 역시 비동기적으로 동작하며, 이벤트가 발생할 때 이벤트 큐에 추가된 후 호출 스택이 비워질 때까지 기다립니다.

요약

자바스크립트는 싱글 스레드를 기반으로 동작하는 언어입니다. 이는 한 번에 하나의 작업만 처리할 수 있음을 의미합니다. 이벤트 루프와 호출 스택을 통해 비동기(DAsynchronous) 작업을 처리하며, 이를 예시를 통해 살펴보았습니다. 이해하기 쉽고 도움이 되는 예시와 설명을 통해 자바스크립트의 싱글 스레드 동작을 더 잘 이해할 수 있었기를 바랍니다.