cs 면접 스터디 준비를 하던 중에 만난 실행 컨텍스트... 이 친구만 이해가 잘 안 되어서 리마인드도 할 겸 블로그에 차근차근 다시 정리해 보려고 한다 👀 유튜브 우아한Tech 채널의 실행 컨텍스트 영상을 많이 참고하였다! (게시글 하단에 링크 有)
1. 실행 컨텍스트 정의
: 코드를 "실행"하는 데 필요한 "환경"을 제공하는 객체
✔ 환경 : 코드 실행에 영향을 주는 조건 · 상태
- 식별자 결정을 더욱 효율적으로 할 수 있는 수단
- 런타임에, JavaScript 엔진이 생성 · 사용하는 객체
나도 이런 정의들만 읽어서는 도통 이해가 안 됐었는데, 아래에 더 자세히 적어 보겠다.
2. 실행 컨텍스트 종류
- 전역 실행 컨텍스트
- 전역 코드를 위해 생성되는 실행 컨텍스트
전역 코드란, "함수 본문의 일부를 제외한 모든 코드"를 의미하며,
이에 대한 실행 컨텍스트는 프로그램당 하나만 생성된다!- JavaScript 에서는, JavaScript 엔진이 스크립트 파일 실행을 시작하기 전에, 전역 실행 컨텍스트를 생성함
- 전체 코드 실행이 종료되면 사라짐
- 함수 실행 컨텍스트
- 함수 코드를 위해 생성되는 실행 컨텍스트
- 함수가 실행될 때마다 해당 함수에 대해 생성됨
- 즉, 함수당 하나씩 실행 컨텍스트가 생성됨
- 함수 실행이 종료되면, 해당 함수에 대한 실행 컨텍스트도 사라짐
- Eval 실행 컨텍스트
eval함수 내에서 실행되는 코드를 위해 생성되는 실행 컨텍스트- 해당 함수는 보안상의 이유로 거의 쓰이지 않는다. ✔
3. 실행 스택(Execution Stack)
- 실행 컨텍스트를 저장 · 관리하기 위해 JavaScript 엔진이 생성하는 스택 ⭐
- 다른 프로그래밍 언어에서는 "호출 스택(Call Stack)" 이라고 부르는 그것
- 후입선출(LIFO) 구조
- top에 있는 실행 컨텍스트가 현재 활성화된 실행 컨텍스트!
↑ 지금까지의 내용 간단히 간추린 것 ⭐
4. 실행 컨텍스트 구조
- VariableEnvironment
- LexicalEnvironment 의 일종
- 선언 시점의 LexicalEnvironment 의 스냅샷 → 변경되지 않는다!
- ES6부터는
var변수 바인딩만 저장
- LexicalEnvironment
- Environment record : 변수 & 함수 선언 저장
- Reference to the outer environments : 상위 스코프를 가리킴
즉, 현재 LexicalEnvironment 에서 변수를 찾지 못했으면, 그 상위 스코프로 가서 변수를 찾을 수 있다는 의미! - ES6부터는
let,const변수 바인딩만 저장
- ThisBinding
this값 할당 결정- 실행 컨텍스트가 활성화될 때,
this가 결정되어 있지 않으면, 자동으로 전역 객체를 가리키게 됨
5. 예제를 통해 알아보는 실행 스택 구조
여기서는 내가 직접 작성한 예제를 통해 작성했는데, 이건 순전히 내 공부 목적이고(ㅎㅎ;) 참고 링크 1번 & 2번에 있는 예제들이 더 이해가 쉽게 잘 되어 있어서 참고하면 좋을 것 같다. 👀
이런 코드가 있으면, 이 코드에 대한 실행 스택은 다음과 같다.
- 일단 전역 실행 컨텍스트가 깔리고, 그 위에 차례로 first 함수 실행 컨텍스트와 second 함수 실행 컨텍스트가 쌓이는 것!
- 가장 나중에 쌓인 second 함수 실행 컨텍스트가 활성화된 실행 컨텍스트 ⭐
각 실행 컨텍스트에 들어 있는 num 에 대한 정보는 다음과 같을 것이다.
- second 함수에 있는
console.log(num)문은2를 출력한다.
참고 링크
- [10분 테코톡] 💙 하루의 실행 컨텍스트 -> 영상 강추 ㅠㅠ
https://www.youtube.com/watch?v=EWfujNzSUmw - JavaScript Internals: Execution Context
https://betterprogramming.pub/javascript-internals-execution-context-bdeee6986b3b - 실행 컨텍스트란 무엇인가요?
https://velog.io/@edie_ko/js-execution-context - 실행 컨텍스트와 자바스크립트의 동작원리
https://catsbi.oopy.io/fffa6930-ca30-4f7e-88b6-28011fde5867
게시글에 있는 이미지들은 직접 제작함ㅎ_ㅎ
아직도 100% 완벽하게 이해되었다는 느낌은 들지 않아서 나중에 포스트를 좀 더 수정해야겠다 😵
틀린 정보가 있다면 댓글로 알려주시면 감사하겠습니다!!
쉽게만살아가면재미없어빙고