자바스크립트 동작원리

호출스택

- 파일이 실행이 되면 호출 스택이 생성되고, anonymous가 아래에 깔린다.

- anonymous가 맨 처음 생성되고 마지막에 사라진다.

- 동기 코드만 존재하는 경우, 코드가 호출되는 순서대로 실행하면 된다.

- 비동기 함수가 같이 있다면 백그라운드, 테스크 큐, 이벤트 루프도 같이 생각해야한다.

 

* 예시

function one() {
	console.log("one");
}

function two() {
	console.log("two");
}

console.log("start");
setTimeout(one, 2000);
setTimeout(two, 1000);
console.log("end");

cf) [~~] : 쌓이는 것을 이미지로 표현

1. 호출 스택에 [Anonymous]가 먼저 쌓인다.

2. 호출 스택에 [console.log("start");]가 쌓여 콘솔에 출력되고 사라진다.

 

    (setTimeout는 비동기 함수이기 때문에 백그라운드로 이동)

3. 호출 스택에 [setTimeout(one, 2000);]가 쌓이고 백그라운드로 이동해 사라진다.

4. 호출 스택에 [setTimeout(two, 1000);]가 쌓이고 백그라운드로 이동해 사라진다.

 

5. 호출 스택에 [console.log("end");]가 쌓여 콘솔에 출력되고 사라진다.

    (백그라운드와 호출스택은 동시에 실행되고 있다.)

5-1. 백그라운드에 있는 [setTimeout(one, 2000);] / [setTimeout(two, 1000);]가 각자 정해진 시간이 지나면, 테스크 큐로 넘어간다.

6. [Anonymous]가 사라진다.

 

7. 테스트 큐에 먼저 들어온 순서대로 이벤트 루프를 통해 호출스택으로 이동해 코드를 실행한다.