싱글스레드 자바스크립트.

자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 자바스크립트를 싱글 스레드 언어라고 부른다. 

 

function yo() {
    setTimeout(function () {
        console.log('1.5초 타이머 끝!')
    }, 1500);

    for (let i = 0; i < 3; i++){
        doSomething(); //가정 : 매번 1초가 걸리는 일
        console.log(i);
    }
    console.log('3초 걸리는 for 문 끝');
}

yo();

console.log('main 끝!');

 

Q. yo()를 실행할 경우, 몇 초 뒤에 '1.5초 타이머 끝!'이 실행될까?

A. 약 3초 후에 실행됨

 

이유: JS는 싱글스레드이기 때문이며, JS의 큐에서 하나씩 꺼내고 콜 스택이 하나가 있는데 그것을 하나씩 처리하는 과정 때문이다.

 

 

 

• main 함수 실행, (콜 스택)
• yo () 실행, (콜 스택)
• setTimeout 함수 실행 (이때 timer는 Web API가 제공하는, 브라우저에서 제공하는 기능이다. 그러므로 콜 스택에 쌓이지 않고 바깥에 저장하게 된다)
• for문 시작, (콜 스택)
• console.log(1) - 1초 경과
• 1.5초 경과 (setTimeout이 실행되어야 할 것 같지만 이미 진행하고 있는 반복문이 있으므로 setTimeout은 큐에 쌓인 채 반복문이 모두 끝날 때까지 지연되게 된다)
• console.log(2) - 2초 경과 
• console.log(3) - 3초 경과 
• '3초 걸리는 for 문 끝'
• main 함수 종료 - 콜 스택이 비로소 다 비워짐
• '1.5초 타이머 끝!' - 뒤늦게 큐에 쌓인 콘솔이 콜 스택으로 옮겨가 찍히게 됨

 

 

 

 

youtu.be/iNH4UQxZexs

 

 

자, 그럼 아래는 어떻게 출력될까?

setTimeout(function() {
    console.log("Bye, World!");
}, 0);
console.log("Hello, World!")

 

//Hello, World!

//Bye, World!

 

 

자세한 작동원리는 아래에서 확인 가능

 

hudi.kr/%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81-javascript-%EC%8B%B1%EA%B8%80%EC%8A%A4%EB%A0%88%EB%93%9C-%EA%B8%B0%EB%B0%98-js%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95/

비동기적 Javascript - 싱글스레드 기반 JS의 비동기 처리 방법 - Hudi - 유사 프로그래머