10. 25. 14일차 TIL - 실행컨텍스트, 이벤트루프, 클로저

1. 실행 컨텍스트 (Execution Context)

* 실행 컨텍스트란?

• 자바스크립트 코드를 실행하는데 필요한 환경을 제공하는 객체
• 자바스크립트 엔진이 코드를 평가하고 실행하는 데 필요한 정보를 담고 있는 공간이다.

자바스크립트는 싱글스레드로 동작하는 언어라고 한다.

→ 한번에 하나의 작업만 수행할 수 있음을 의미

1) 단계 

• 평가 단계 (컴파일 단계) : 레코드 수집(호이스팅) 및 상위 스코프(Outer)를 결정하는 단계
• 실행 단계 (런타임 단계) : 함수 실행 시 실행 컨텍스트를 콜 스택에 푸쉬하고 변수에 값을 할당하는 단계

2) 구성 요소

• VE(Virable Environment)
  • 평가 단계에서 호이스팅이 이루어지는 공간.
  • 변수가 메모리에 할당되는 변수환경

* 식별자 : 변수 또는 함수의 이름.

 

• LE(Lexical Environment)
  • 실행 단계에서 사용하는 공간
  • VE의 정보를 바탕으로 실행 단계에서 변수를 참조하고 값을 할당한다.
  • Record : 선언된 변수, 함수, 클래스 등이 기록되는 공간으로 식별자와 그 값이 저장된다.
  • Outer : 상위 스코프를 가리키고 있는 공간으로 스코프체인을 형성하는 역할을 한다.

* 스코프체인 : 변수 참조 시 같은 스코프 내에서부터 찾고, 없으면 외부 스코프로 거슬러 올라가며 참조할 변수를 찾는 매커니즘으로 실행 컨텍스트 중 렉시컬 환경의 outer 참조를 통해 구현되는 개념.

• this binding
  • this가 참조하는 것은 함수가 호출되는 방식에 따라 결정

---

2. 이벤트 루프 (Event Loop)

* 이벤트 루프란?

• 비동기 작업을 관리하고 순서대로 프로그램의 실행 흐름을 제어하기 위한 장치
• 콜 스택과 큐를 관리하면서 순차적인 코드 실행을 위한 비동기 처리 매커니즘

1) JS 주요 구성 요소

• 콜 스택 : JS 코드를 실행
• 콜백 큐 : 비동기 작업이 완료되면 콜백 함수가 대기하는 큐
• Web APIs : 비동기 작업을 처리하는 브라우저의 API모음
  • 예시) setInterval, setTimeout, fetch, addEventListener, 등
• 태스크 큐 : web API 등의 콜백 함수가 들어가는 공간
• 마이크로태스크 큐 : promise.then, MutationObserver, 등의 콜백 함수가 들어가는 공간
• 이벤트 루프 : 콜 스택과 콜백 큐를 모니터링하며, 콜 스택이 비어 있을 때, 콜백 큐에서 대기 중인 콜백 하수를 가져와 실행하는 역할을 하는 개체

2) 주의점

• console.log는 바로 실행된다. → 콜스택에 들어가자마자 바로 처리된다고 생각하자.
• 마이크로태스크 큐에는 대체적으로 promise.then이 저장된다고 생각하고 나머지는 태스크 큐에 저장된다고 생각하자.
• 마이크로태스크 큐가 태스크 큐보다 우선순위가 높다. → 특별한 놈이니 따로 관리하고 실행할 때에도 우대해준다?
• TDZ : 일시적 사각지대라는 의미로 일시적으로 변수를 참조할 수 없는 상태이며 ReferenceError를 반환한다.

주의할 점을 고려하여 예제의 실행순서를 확인해보자.

 출력순서는 1 - 4 - 3 - 2 일 것이다.

예상한 순서대로 출력됨을 확인 할 수 있다.

 

그렇다면 태스크 큐에 저장되는 콜백 함수가 여러개라면 어떻게 될까?

다음 예제는 1 - 5 - 4 - 2 - 3 순으로 실행될 것이다.

하지만 setTimeout에 1초 이상의 지연시간을 설정해준다면 3번이 먼저 실행될 수도 있다.

---

3. 클로저 (Closure)

* 클로저란?

• 함수와 함수가 선언된 렉시컬 환경과의 조합
• 외부 함수의 실행 컨텍스트가 사라진 이후에도 내부 함수가 여전히 외부 함수의 변수에 접근할 수 있는 상태를 설명하는 개념
• 외부 함수의 변수를 참조하는 내부 함수 (클로저 또는 클로저 함수라고 말함)

예시1

예시 2

---

★ 14일차 소감

 

오늘은 새로운 개념을 많이 배웠다. 실행컨텍스트를 통해 이전부터 계속 언급되었던 호이스팅이 무엇인지, 또 JS에서작성한 코드들이 어떻게 작동되는지에 대해 알게 되었고, 이벤트 루프를 배움으로써 나를 그렇게 힘들게 했던 비동기개념에 대한 작동 원리를 더욱 더 정확하게 알 수 있었다. 클로저 현상은 모르고만 있었을 뿐 과제를 할 때 많이 사용하고 있었던 것 같다. 전역에서 JS를 통해 제어하고 싶은 html요소를 변수로 선언하고, 어떤 함수의 콜백함수(내부함수)에서 이 요소를 사용했던 모든 상황들에서(전역변수를 참조) 클로저함수 또는 클로저가 발생했을 것이다. 이렇게 JS강의주차가 끝났다. 다음주부터는 드디어 react에 대해 배우게 된다고 한다. 더 어려운 내용을 배우게 될 것 같아 두렵지만 현역 개발자들이 사용하는 워크프레임에 대해 배우게 되니 무척 설렌다.. 하지만 꼭 시작하기 전 이번주차에 배운 내용을 다시 복습하고 내 것으로 만들어야겠다..