#1 자바스크립트 함수 실행의 이해 - 콜스택, 이벤트루프, Task, 실행컨텍스트

https://www.notion.so/simsimjae/33-JS-Github-9496784fed134bbab03568070f50894f

33가지 JS개념 - Github정리

위 링크에서 보는걸 추천드립니다.

 

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. secondFunction()이 호출되면 빈 스택프레임이 생성된다.
2. secondFunction()이 firstFunction을 호출하면 firstFunction이 스택에 삽입된다.
3. firstFunction속에서 콘솔이 찍히고 리턴된다.
4. firstFunction는 스택에서 삭제된다.
5. 그다음 secondFunction()에 대해서도 위와 같은 과정이 반복된다.

재귀함수 호출을 잘못 사용하게 되면 스택이 꽉차게 되어Stack Overflow가 발생할 수 있다.

 

이런식으로 함수가 호출될때마다 콜스택에 쌓인다.

 

무한루프에 빠져서 콜스택이 꽉차버리게 되면 브라우저는 위와같은 에러를 던진다.

힙

• 힙은 구조화 되지 않은 메모리이다.
• 객체나 변수는 이곳에 할당된다.

큐

만약 어떤 이벤트에 핸들러가 등록되어 있다고 해보자.

이때, 그 이벤트가 발생하게 되면 큐에 그 이벤트에 관한 메세지가 쌓인다.

이 메세지는 스택에 충분한 공간이 있을때 큐에서 하나씩 꺼내서 처리된다.

이벤트 핸들러가 등록되지 않은 이벤트는 큐에 삽입되지 않는다.

 

이벤트루프

console.log() 한두번 실행은 괜찮지만, 수만번에 걸쳐서 호출되게 된다면 스택을 계속 차지할것이고, 이것은 성능 하락으로 이어진다.

이런것을 blocking script라고한다.

만약 네트워크 통신을 비동기가 아닌 동기방식으로 처리하게 될 경우, 그 동기 처리가 끝날때까지 스택은 블럭된다.

그래서 화면을 다시그리거나, 버튼을 클릭한다거나 하는 일들을 제대로 브라우저가 처리할수 없는 상태가 되어 버린다.

자바스크립트는 싱글 스레드 언어이기 떄문에 두가지 작업을 동시에 할 수 없다.

콜스택에서 실행중인 함수가 값을 리턴해야지만 그 다음일을 할 수 있게 된다. 그래서 네트워크 요청같이 시간이 오래걸리는 작업이 스택에서 실행중이라면 브라우저는 아무일도 할 수 없게 되는 것이다.

그래서 비동기 함수들은 동기함수(console.log)와는 다르게 스택에 바로 삽입되지 않는다.

 

이벤트에 이벤트 리스너를 붙인 상태에서 이벤트가 발생하면 메세지가 추가된다.

발생한 이벤트에 대한 이벤트 리스너가 없다면 그 이벤트는 사라진다.

어떤 버튼 클릭 이벤트 핸들러가 붙이고 클릭하면 이벤트가 발생한다.

 

실행 컨텍스트란?

자바스크립트 코드가 실행되는 환경을 의미한다.

브라우저나 노드에서 js를 실행시키는 순간 글로벌 실행 컨텍스트가 생성된다.

유명한 자바스크립트 엔진 2가지 : 구글 V8, SpiderMonkey

var num = 2; function pow(num){ return num * num; }

자바스크립트 엔진은 위 코드를 어떻게 해석할까?

1. top to bottom으로 훑으면서 변수와 함수가 있다는걸 알아챈다.
2. 이 변수와 함수를 메모리에 올린다. (함수를 호출하는게 아니다.) → 변수는 이 과정에서 이미 초기화 된다.

javascript 코드를 실행시키면 글로벌 메모리와 글로벌 실행 컨텍스트가 생성된다.

글로벌 메모리에는 다음과 같이 변수나 함수 선언이 들어간다.

 

함수를 호출하게 되면 내부에선 어떤일이 일어날까?

var num = 2; function pow(num){ return num * num; } var res = pow(num);

함수를 호출하는 순간 콜스택에 그 함수에 대한 정보가 쌓인다.

 

• 자바스크립트 코드를 실행하는 순간 main()함수가 콜스택에 들어가게 된다.

함수를 호출하면 다음과 같은 일들이 벌어진다.

1. 글로벌 실행 컨텍스트에 함수가 들어간다. → 함수 선언만 해줬을때는 글로벌 메모리만 있었다.
2. 로컬 실행 컨텍스트가 글로벌 실행 컨텍스트 안에 생긴다. → 함수 내 지역변수를 들고 있다.