[JS]자바스크립트 동작 원리(실행 컨텍스트, 스코프, 이벤트루프)

실행 컨텍스트 🛠️

실행할 코드에 제공할 환경 정보들을 모아놓은 객체

=>  쉬운말로, 자바스크립트가 코드를 잘 이해하고 실행할 수 있도록 도와주는 중요한 도구

 

실행 컨텍스트 구성요소

1. Variable Environment

• 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보
• 초기값을 유지
• 구성 : environmentRecord + outer-EnvironmentReference

2. Lexical Environment

• 처음엔 Variable Environment와 같지만 변경 사항이 실시간으로 반영됨
• 구성 : environmentRecord + outer-EnvironmentReference

3. ThisBinding

• 식별자가 바라봐야 할 대상 객체
• this로 지정된 객체가 저장
  (지정되지 않은 경우 : 전역 객체)

* environmentRecord

현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장

(자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행하는데, 여기서 "호이스팅" 개념이 등장)

 

* outer-EnvironmentReference

상위 스코프를 가리키는 공간, 스코프 체인을 형성하는 역할

(스코프 체인 : 식별자의 유효범위를 안에서 밖으로 차례로 검색해나가는것)

스코프 🚩

식별자가 유효한 범위

=> 쉬운말로, 어떤 이름(변수나 함수 등)이 유효하고 사용할 수 있는 범위

이벤트 루프 🎉

자바스크립트의 비동기 프로그래밍을 가능하게 하는 메커니즘으로, 콜스택과 태스크 큐를 관리

=> 쉬운말로, 콜 스택과 태스크 큐를 감시하며, 콜 스택이 비면 태스크 큐에 대기 중인 콜백을 실행해 주는 역할

---

⭐자바스크립트 동작 원리⭐

1. 코드가 실행되는 환경 정보를 모아서 컨텍스트를 구성

(이때 컨텍스트안에 environmentRecord와 outer-EnvironmentReference가 담김)

(ex : 변수, 함수, 그리고 코드 실행에 필요한 정보를 포함해 스코프등)

(제일 먼저 전역 컨텍스트가 담김, global 컨텍스트)

 

2. 콜 스택 구조에 실행 컨텍스트가 차곡차곡 쌓임

(∵ 자바스크립트 싱글 스레드로 동작)

 

3. 가장 위에 있는 실행 컨텍스트부터 실행

(만약 실행 중에 또 다른 함수 호출이 있으면, 새로운 실행 컨텍스트가 스택에 추가되고, 그 함수가 끝나면 스택에서 제거)

 

(👇비동기 코드가 있을시)

3-2. 비동기 코드 실행시 Web API에 대기

 

3-3. 비동기 작업이 완료되면 태스크 큐 또는 마이크로태스크 큐에 쌓임

(웹 api는 태스크 큐에, Promise의 .then 콜백등은 마이크로태스크 큐에 쌓임)

 

3-4. 이벤트 루프가 콜 스텍이 비어있을때(3번후)  3-3을 하나씩 콜백에 이동시킴

(마이크로태스크큐 > 태스크 큐 순으로 우선순위)

 

4. 콜스텍이 비어진 상태로 종료

 

스택 : 먼저 들어간 데이터가 나중에 나오는(마치 통안에 든) 데이터 구조

(그 유명한 "스택오버플로우"의 그 스택임)

 

큐 : 먼저 들어간 데이터가 먼저 나오는(마치 통로같은) 데이터 구조

 

💫우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐 💫

---

🔸 예시

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

 

 

✏️참고 하기 좋은 영상

실행컨텍스트

https://youtu.be/EWfujNzSUmw?si=3R3jrwZMI1IJLdji

 

이벤트 루프

https://youtu.be/8aGhZQkoFbQ?si=Re-DGSldZBWFKQ7M