setTimeout 과 싱글스레드

오늘의 결론부터 말하자면 Javascript 는 싱글스레드이다.

아래와 같은 코드가 있을 때, 출력을 예상해봐라! 3초 준다!

function firstTask() {
	setTimeout(function() {
		console.log('1ns is passed, timer is ringing!');
	}, 1);

	for (var i = 1; i <= 3; i++) {
		taskOneSecond();
		console.log(i + ' task is fisnish')
	}
}

function taskOneSecond() {
	var num = 1;
	for (var i = 1; i < 1000000000; i++) {
		num += i;
	}
}

firstTask();

위에 이미지와 같은 결과를 예상했으면, 좌측상단 X를 누르고 나가주세요. 혹시 우측이신가요? window os 사용하시나요? 저는 mac 인데 ㅋ 

싱글스레드라는 개념을 알지 못했다면, 위와 같은 결과를 예상하지 못할 수 있다. taskOneSecond() 함수가 1초 정도 소요되니, taskOneSecond() 함수 호출 

이후에 setTimeout() 함수 내부의 console이 실행 될 것이라고 생각했을 것이다. 그러나 setTimeout 생각보다 정확하지 않다! 아래 동작순서를 보자.

먼저 작업들이 순차적으로 저장되는 Queue(FIFO) 와 Queue 에서 작업을 순차적으로 가져와서 처리하는 Stack(LIFO) 이 존재한다.

 1. firstTask 함수가 Queue 에서 Stack 으로 들어간다.

 2. setTimeout 함수는 Stack이 아닌, 브라우저에서 제공하는 Web API 에서 실행된다.

 3. 반복문을 통해 숫자를 저장하는 메소드가 실행된다.

먼저 작업들이 순차적으로 저장되는 Queue(FIFO) 와 Queue 에서 작업을 순차적으로 가져와서 처리하는 Stack(LIFO) 이 존재한다.

 1. firstTask 함수가 Queue 에서 Stack 으로 들어간다.

 2. setTimeout 함수는 Stack이 아닌, 브라우저에서 제공하는 Web API 에서 실행된다.

 3. 반복문을 통해 숫자를 저장하는 메소드가 실행된다.

그리고 순차적으로 작업들이 종료되면 Stack 에서 작업이 제거 된다. 그리고 setTimout 에서 설정한 시간이 종료되면 해당 업무는 Queue에 등록이 된다.

그러나 아직 firstTask가 끝나지 않았기 떄문에 setTimout은 바로 실행될 수 없다. 이런 이유로 인해 setTimeout이 설정한 시간이 종료 후 바로 실행될 수 없는 것이다. javascript가 만약 멀티스레드라면 가능할 수 있겠지만, 싱글스레이드이고, 그렇기에 싱글 스택이기 떄문에 불가능하다!

오늘의 정리 끝!!