자바스크립트 모델의 시각적인 표현

JS는 스택을 가진다. 함수가 실행되면 이 스택에 들어가고 실행이 종료되면 스택에서 빠진다.

콜스택은 자바스크립트 엔진에서 단 하나만 존재하고 위에서 아래로 실행된다.

→ 콜스택은 동기적으로 처리된다.(한번에 하나씩만 처리됨, 한번에 병렬처리 불가능)

<aside> 💡 콜백함수는 이벤트 루프에 의해서 콜스택에 삽입된다.

</aside>

함수가 실행되면 스택에서 스택프레임 하나가 생기고 그곳에 삽입된다.

스택프레임속에는 실행 컨텍스트가 들어있고 그안에는 변수객체가 있다.

변수객체 속에는 함수에서 사용하는 지역변수나 매개변수 this 바인딩 등의 정보가 들어가있다.

그리고 함수가 리턴되면 스택프레임도 반납된다.

자바스크립트 동기 처리 방식

자바스크립트 엔진은 콜스택에 스택 프레임들을 생성한다고 했다. 엔진은 각 프레임들의 위치를 알고 있기 때문에 스택의 탑에서부터 바텀으로 내려오면서 하나하나 함수를 실행해 갈 수 있는것이다.

• 동기식이라는것은 마치 편의점에서 앞사람이 계산을 끝날때까지 내가 계산을 하지 못하는것과 같다. 즉 한번에 하나의 일만 처리하는것이다.

다음 코드가 순서대로 실행됬을때 어떻게 동작하는지 살펴보자.

function firstFunction(){ console.log("Hello from firstFunction");}
function secondFunction(){ firstFunction(); console.log("The end from secondFunction");}
secondFunction();

1. secondFunction()이 호출되면 빈 스택프레임이 생성된다.
2. secondFunction()이 firstFunction을 호출하면 firstFunction이 스택에 삽입된다.