가장 알고싶고도 모르고싶은 주제인 실행컨텍스트에 대해서 알아보겠습니다.
오늘의 블로깅도 모자딥다와 우테코 영상을 전적으로 따릅니다.
실행 컨텍스트 : 코드를 실행하는데 필요한 환경을 제공하는 객체
스코프, 호이스팅, 클로저의 개념과 개념만 알고 있는 상태입니다.
(스코프는 유효범위 .. 호이스팅은 선언을 끌어올린것처럼 동작하는 특징..
클로저는 함수와 그 함수의 렉시컬환경의 조합..어쩌고.. 저쩌고..)
실행 컨텍스트를 이해하게 되면
자바스크립트의 주요한 동작들을 이해할 수 있습니다.
실행 컨텍스트의 구성
실행 컨텍스트는 직접 접근해서 확인하기 어렵고
그 구성이 매우 복잡합니다.
따라서 실행 컨텍스트의 Lexical Enviroment 안에 있는
환경 Record로 호이스팅을 Outer로 스코프체이닝에 대해서 간단하게 알아보겠습니다.
먼저, 실행 컨텍스트의 생성과 삭제는 다음과 같이 이루어집니다.
자바스크립트를 실행시키면
자바스크립트 엔진은 Call Stack에
1. 먼저 전역 실행 컨텍스트를 담습니다. 여기에는 환경 Record와 Outer가 담겨있습니다.
2. 만약 함수 foo1를 호출할 경우 함수 foo1의 실행컨텍스트를 실행해서 또 Call Stack에 담습니다.
3. 만약 함수 foo1 안에서 함수 foo2를 호출할 경우 또 실행컨텍스트를 Call Stack에 담습니다.
4. 함수 foo2가 실행 -> 종료 -> 실행컨텍스트 삭제
5. 함수 foo1 실행 -> 종료 -> 실행컨텍스트 삭제
6. 전역 코드 실행 -> 종료 -> 실행컨텍스트 삭제
1. 호이스팅
호이스팅이란?
선언라인 전에 변수를 참조할 수 있다.
-> 끌어올려진 듯한 현상
왜 이런현상이 발생하느냐?
자바스크립트 엔진이 코드를 스캔하면서
변수같은 정보를 실행 컨텍스트에 미리 기록 하기 때문에.
어디에?
환경 Record : 식별자와 식별자에 바인딩된 값을 기록해두는 객체
자바스크립트 엔진은 코드를 스캔하면서
1. 전역 컨텍스트를 생성하고 Call Stack에 넣습니다.
2. 선언할것이 있다면 먼저 선언해둡니다.
3. 선언하는 과정에서 실행 컨텍스트 안에 있는 환경 Record에 식별자를 기록합니다.
선언 : 메모리 공간을 확보하고 식별자와연결
초기화 : 식별자에 암묵적으로 undefined 값 바인딩
변수 호이스팅
* var키워드로 선언시 undefined로 초기화(선언, 초기화 동시에 일어남)
* let, const 키워드로 선언시 초기화 안되어서 식별자를 참조할 수 없는 구역(TDZ)
함수 호이스팅
* 함수 선언식 : 선언과 동시에 자바스크립트가 암묵적으로 함수 객체 생성해서 환경 Record에 기록
* 함수 표현식 : var로 표현시 undefined로 초기화 되므로 Type Error/ let, const Reference Error
여기까지가
생성 단계 : 본격적인 실행에 앞서 스캔하고 준비하는 단계
실행 컨텍스트를 생성하고 선언문만 먼저 실행해서 환경 Record에 미리 기록해두는 단계
이후는
실행 단계 : 선언문 외 나머지 코드를 순차적으로 실행
환경 Record를 참조하거나 업데이트
2. 스코프 체이닝
1. 자바스크립트는 현재 실행중인 실행컨텍스트의 환경 Record를 보고 식별자의 값을 업데이트 합니다.
2. 함수 선언문 방식으로 선언된 함수는 환경 Record에 기록됩니다.
3. 이 함수를 실행하면 새로운 실행 컨텍스트가 실행이 됩니다. 이때 바깥 렉시컬 환경으로 돌아갈 수 있는 outer를 남겨둡니다.
4. 새로 만들어진 실행컨텍스트에 식별자의 값을 기록합니다.
5. 해당 식별자를 사용하려고 환경 Record를 보았을 때 현재 활성화된 실행컨텍스트의 환경 Record를 보고 없으면
outer 렉시컬 환경으로 가서 계속 찾다가 없으면 전역 실행 컨텍스트의 렉시컬환경까지 찾아봅니다. 여기서도 없다면 undefined로 출력합니다. 있다면 해당 렉시컬 환경에서 식별자를 찾는행위를 멈춥니다.
현재 실행중인 실행 컨텍스트는 하나이지만 이전 렉시컬 환경을 가르키는 outer로 타고 갈 수 있다.
스코프 체인 : 식별자를 결정할때 활용하는 스코프들의 연결리스트
Ref
https://www.youtube.com/watch?v=EWfujNzSUmw
'JavaScript' 카테고리의 다른 글
| [Javascript]이벤트루프 (0) | 2023.09.14 |
|---|---|
| This (2) | 2023.09.12 |
| 모듈(Module) (0) | 2023.09.01 |
| 클로저 (Closure) (0) | 2023.08.30 |
| 스코프(scope) (2) | 2023.08.28 |
가장 알고싶고도 모르고싶은 주제인 실행컨텍스트에 대해서 알아보겠습니다.
오늘의 블로깅도 모자딥다와 우테코 영상을 전적으로 따릅니다.
실행 컨텍스트 : 코드를 실행하는데 필요한 환경을 제공하는 객체
스코프, 호이스팅, 클로저의 개념과 개념만 알고 있는 상태입니다.
(스코프는 유효범위 .. 호이스팅은 선언을 끌어올린것처럼 동작하는 특징..
클로저는 함수와 그 함수의 렉시컬환경의 조합..어쩌고.. 저쩌고..)
실행 컨텍스트를 이해하게 되면
자바스크립트의 주요한 동작들을 이해할 수 있습니다.
실행 컨텍스트의 구성
실행 컨텍스트는 직접 접근해서 확인하기 어렵고
그 구성이 매우 복잡합니다.
따라서 실행 컨텍스트의 Lexical Enviroment 안에 있는
환경 Record로 호이스팅을 Outer로 스코프체이닝에 대해서 간단하게 알아보겠습니다.
먼저, 실행 컨텍스트의 생성과 삭제는 다음과 같이 이루어집니다.
자바스크립트를 실행시키면
자바스크립트 엔진은 Call Stack에
1. 먼저 전역 실행 컨텍스트를 담습니다. 여기에는 환경 Record와 Outer가 담겨있습니다.
2. 만약 함수 foo1를 호출할 경우 함수 foo1의 실행컨텍스트를 실행해서 또 Call Stack에 담습니다.
3. 만약 함수 foo1 안에서 함수 foo2를 호출할 경우 또 실행컨텍스트를 Call Stack에 담습니다.
4. 함수 foo2가 실행 -> 종료 -> 실행컨텍스트 삭제
5. 함수 foo1 실행 -> 종료 -> 실행컨텍스트 삭제
6. 전역 코드 실행 -> 종료 -> 실행컨텍스트 삭제
1. 호이스팅
호이스팅이란?
선언라인 전에 변수를 참조할 수 있다.
-> 끌어올려진 듯한 현상
왜 이런현상이 발생하느냐?
자바스크립트 엔진이 코드를 스캔하면서
변수같은 정보를 실행 컨텍스트에 미리 기록 하기 때문에.
어디에?
환경 Record : 식별자와 식별자에 바인딩된 값을 기록해두는 객체
자바스크립트 엔진은 코드를 스캔하면서
1. 전역 컨텍스트를 생성하고 Call Stack에 넣습니다.
2. 선언할것이 있다면 먼저 선언해둡니다.
3. 선언하는 과정에서 실행 컨텍스트 안에 있는 환경 Record에 식별자를 기록합니다.
선언 : 메모리 공간을 확보하고 식별자와연결
초기화 : 식별자에 암묵적으로 undefined 값 바인딩
변수 호이스팅
* var키워드로 선언시 undefined로 초기화(선언, 초기화 동시에 일어남)
* let, const 키워드로 선언시 초기화 안되어서 식별자를 참조할 수 없는 구역(TDZ)
함수 호이스팅
* 함수 선언식 : 선언과 동시에 자바스크립트가 암묵적으로 함수 객체 생성해서 환경 Record에 기록
* 함수 표현식 : var로 표현시 undefined로 초기화 되므로 Type Error/ let, const Reference Error
여기까지가
생성 단계 : 본격적인 실행에 앞서 스캔하고 준비하는 단계
실행 컨텍스트를 생성하고 선언문만 먼저 실행해서 환경 Record에 미리 기록해두는 단계
이후는
실행 단계 : 선언문 외 나머지 코드를 순차적으로 실행
환경 Record를 참조하거나 업데이트
2. 스코프 체이닝
1. 자바스크립트는 현재 실행중인 실행컨텍스트의 환경 Record를 보고 식별자의 값을 업데이트 합니다.
2. 함수 선언문 방식으로 선언된 함수는 환경 Record에 기록됩니다.
3. 이 함수를 실행하면 새로운 실행 컨텍스트가 실행이 됩니다. 이때 바깥 렉시컬 환경으로 돌아갈 수 있는 outer를 남겨둡니다.
4. 새로 만들어진 실행컨텍스트에 식별자의 값을 기록합니다.
5. 해당 식별자를 사용하려고 환경 Record를 보았을 때 현재 활성화된 실행컨텍스트의 환경 Record를 보고 없으면
outer 렉시컬 환경으로 가서 계속 찾다가 없으면 전역 실행 컨텍스트의 렉시컬환경까지 찾아봅니다. 여기서도 없다면 undefined로 출력합니다. 있다면 해당 렉시컬 환경에서 식별자를 찾는행위를 멈춥니다.
현재 실행중인 실행 컨텍스트는 하나이지만 이전 렉시컬 환경을 가르키는 outer로 타고 갈 수 있다.
스코프 체인 : 식별자를 결정할때 활용하는 스코프들의 연결리스트
Ref
https://www.youtube.com/watch?v=EWfujNzSUmw
'JavaScript' 카테고리의 다른 글
| [Javascript]이벤트루프 (0) | 2023.09.14 |
|---|---|
| This (2) | 2023.09.12 |
| 모듈(Module) (0) | 2023.09.01 |
| 클로저 (Closure) (0) | 2023.08.30 |
| 스코프(scope) (2) | 2023.08.28 |
