[CoreJavaScript] Chapter 02. 실행 컨텍스트 내용 정리
2-1 실행 컨텍스트란 ?
실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
→ 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성.
→ 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식
( 전체 코드의 환경과 순서를 보장)
스택 : 출입구가 하나뿐인 깊은 우물 같은 데이터 구조
→ a,b,c,d를 저장했다면 d,c,b,a 순으로 꺼낼 수 밖에 없다. (LIFO)
큐 : 양쪽이 모두 열려있는 파이프 구조
→ 종류에 따라 양쪽 모두 입력과 출력이 가능하나, 한쪽은 입력만 다른 한쪽은 출력을 담당.
→ a,b,c,d,를 저장했다면 a,b,c,d 순으로 꺼낸다.(FIFO)
2-1 실행 컨텍스트와 콜 스텍
var a = 1;
function outer() {
function inner() {
console.log(a); //undefined
var a = 3;
}
inner();
console.log(a); // 1
}
outer();
console.log(a); // 1
전역 컨텍스트는 자바스크립트 코드를 실행하는 순간 전역 컨텍스트가 콜 스택에 담긴다. 파일이 열리는 순간 전역 컨텍스트가 활성화 된다고 보면 된다.
** 전역 컨텍스트 개념 = 실행 컨텍스트 개념
어떤 실행 컨텍스트가 활성화될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장
** 이 객체는 자바스크립트 엔진이 활용할 목적으로 생성할 뿐 개발자가 코드를 통해 확인 불가
- 활성화 된 실행 컨텍스트 수집 정보
- VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보, 선언 시점의 LexicalEnvironment의 스냅샷으로, 변경 사항은 반영 x
- LexicalEnvironment: 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간 반영.
- ThisBinding : This 식별자가 바라봐야 할 대상 객체.
2-2 VariableEnvironment
VariableEnvironment 내용 = LexicalEnvironment 내용 이지만, 최초 실행 시의 스냅샷을 유지하는 점이 다름.
실행 컨텍스트 생성 시, VariableEnvironment 정보 담음
→ 이를 그대로 보사해서 LexicalEnvironment 만듬.
→ 이후 LexicalEnvironment주로 활용.
2-3 LexicalEnvironment
2-3-1 environmentRecord와 호이스팅
environmentRecord : 현재 컨텍스트와 관련된 코드의 식별자 정보들을 저장.
- 컨텍스트 내부 전체를 처음부터 끝까지 순서대로 수집
자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다.
호이스팅 : ‘끌어올리다’ 의미로 변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대체한 가상의 개념
- 자바스크립트 엔진이 실제로 끌어올리지는 않지만 편의상 끌어올린것으로 간주.
호이스팅 규칙
매개변수와 변수에 대한 호이스팅(1) - 원본코드
function a (x) {
console.log(x); // (1) 예상 : 1
var x;
console.log(x); // (2) 예상 : undefined
var x = 2;
console.log(x); // (3) 예상 : 2
}
a(1);
매개변수와 변수에 대한 호이스팅(2) - 매개변수를 변수 선언/할당과 같다고 간주해서 변환한 상태
function a () {
var x = 1; // 매개변수 선언
console.log(x); // (1)
var x;
console.log(x); // (2)
var x = 2;
console.log(x); // (3)
}
변수 정보를 수집하는 과정 즉 호이스팅 처리 시
매개변수와 변수에 대한 호이스팅(3) - 호이스팅을 마친 상태
function a () {
var x; // 변수 x 선언 → 메모리에서 저장 공간 확보, 주솟값을 변수 x에 연결
var x; // 다시 변수 x 선언
var x; // 무시
x = 1; // x에 1을 할당 → 1을 별도의 메모리에 담고, 주솟값 입력
console.log(x); // 1
console.log(x); // 1
x = 2; // x에 2를 할당 → 2을 별도의 메모리에 담고, 1을 가리키는 주솟값을 2를 가리키는 주소값으로 대치
console.log(x); // 2
}
a(1);
→ environmentRecord는 변수명만 끌어 올리고 할당 과정은 원래 자리에 그대로 남겨둔다.
→ 매겨변수의 경우도 마찬가지. environmentRecord의 관심사에 맞춰 수집 대상 1,2,3을 순서대로 끌어올린다.
→ 함수 선언식도 호이스팅이 된다.
함수 선언문과 함수 표현식
함수 선언문 : function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미
- 반드시 함수명의 정의 되어야 함.
함수 표현식 : 정의한 function을 별도의 변수에 할당하는 것을 의미.
- 함수명의 정의 되지 않아도 됨. (정의 하지 않으면 - 익명 함수 표현식 / 정의 하면 - 기명 함수 표현식)
함수를 정의하는 세 가지 방식
function a () {} // 함수 선언문
a(); // 실행 o
var b = function () {} // (익명) 함수 표현식
b(); // // 실행 o
var c = function d () {} // 기명 함수 표현식
c(); // 실행 o
d(); // error (함수명은 오직 내부에서만 접근 가능)
함수 선언문과 함수 표현식(1) - 원본코드
console.log(sum(1,2));
console.log(multiply(3,4));
function sum (a,b) { // 함수 선언문
return a + b;
}
var multiply = function (a,b) { // 함수 표현식
return a * b
}
함수 선언문과 함수 표현식 (2) - 호이스팅 마친 상태
var sum = function sum (a,b) { // 함수 선언문은 전체를 호이스팅
return a + b;
}
var multiply; // 변수 선언부만 끌어올림.
console.log(sum(1,2));
console.log(multiply(3,4));
multiply = function (a,b) { // 변수의 할당부는 원래 자리에 남겨짐.
return a * b;
}
호이스팅이 된 결과
console.log(sum(1,2)) 은 → 3으로 정상 작동
console.log(multiply(3,4)) 은 → 비어있는 대상을 함수로 여기기 때문에 ‘multiply is not a function’ 이라는 에러 메세지를 출력.
함수 선언문은 → 전체를 호이스팅을 진행
함수 표현식은 → 변수 선언부는 끌어 올리고 할당한 부분은 원래 자리에 남는 차이가 있다.
2-3-2 스코프, 스코프 체인, outerEnvironmentReference
스코프 : 식발자에 대한 유효 범위
- 오직 함수에 의해서만 스코프가 생성.
스코프 체인: 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것
- 이것을 가능케 하는 것이 바로 LexicalEnvironment의 두 번째 수집 자료인 outerEnvironmentReference
outerEnvironmentReference : 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조.
→ 선언하는 행위 : 콜 스택 상에서 어떤 실행 컨텍스트가 활성화된 상태일 때뿐!!!
스코프 체인
var a=1;
var outer = function(){
var inner = function(){
console.log(a); //undefined
var a = 3;
};
inner();
console.log(a); // 1
};
outer();
console.log(a); // 1
L.E : LexicalEnvironment / e : enivronmentRedcord / o : outerEnvironmentReference
전체 윤곽
전역 컨텍스트 → outer컨텍스트 → inner 컨텍스트 순으로 점차 규모가 작아지는 반면 스코프 체인을 타고 접근 가능한 변수의 수는 늘어남.
변수 은닉화 : inner 함수 내부에서 a 변수를 선언했기 때문에 전역 공간에서 선언한 동일한 이름의 a 변수에는 접근할 수 없음
2-4 this
실행 컨텍스트의 thisBinding에는 this로 지정된 객체가 저장
실행 컨텍스트 활성화 당시에 this가 지정 되지 않은 경우 this는 전역 객체가 저장.
그밖에 함수를 호출하는 방법에 따라 this에 저장 되는 대상이 달라짐.