1월 22일 여정 14일차이다.
오늘은 많이 복잡한 실행 컨텍스트에 대해 정리해볼까 한다.
Outer는 무엇이고? Record는 무엇일까? 마지막으로 실행 컨텍스트는 무엇일까?
오늘의 Today I Learned
problem
실행 컨택스트라는 것을 공부하면서 많은 의문이 생겼다. 큐와 스택 그리고 호이스팅과 스코프체이닝 과연 이것들은 무엇일까?
try
코어 자바스크립트 책을 보았지만, 너무 어려워서 이해가 하나도 가지 않았다. 항해99에서 준 자료역시 이해가 쉽지 않았다.
solve
일단 먼저 큐와 스택을 보자면 이러하다.
스택은 후입선출이다. 먼저 들어간것은 맨 나중에 꺼내지고 나중에 들어간 것이 먼저 꺼내진다. 이것이 스택이다.
그렇다면 큐는 그 반대이다. 먼저 들어가면 먼저 나온다. 바로 이것이 큐와 스택의 원리이다.
console.log(TVChannel) // undefined
var TVChannel = 'Tv';
console.log(TVChannel) // Tv여기서 보면 TVChannel을 선언하고 console로 출력하였을때, 밑에 console은 잘 출력되는 것을 볼 수 있다. 그렇지만 위에 것은 undefined가 출력된다. undefined는 값이 할당 되지 않음을 나타낸다.
사실 다른 언어 같으면 오류가 뜨는것이 맞지만, 자바스크립트는 이처럼 오류가 안뜨고 값이 할당되지 않았다고만 한다. TVChannel이 맨위에 console 전에 이미 만들어져 있는 것처럼 보인다.
이런 현상을 호이스팅이라고 한다. 선언문이 최상단에 끌어올려진 듯한 현상을 뜻한다.
이 현상의 발생 원인은 자바스크립트 엔진이 전체 코드를 스캔하면서 변수와 같은 정보를 실행 컨텍스트에 어딘가에 저장해놓기 때문이다. 이때 기록해 놓는 공간이 바로
Record이다. 정확히는 환경 레코드(Environment Record)라고 한다. 식별자와 식별자에 바인딩된 값을 기록하는 곳이다.
그러나 여기서 끝이 아니다.
변수 호이스팅과 함수 호이스팅이 나누어 진다.
변수 호이스팅부터 한번 보자.
위의 코드를 다시 보면,
- 코드가 실행 되면 전역 실행 컨택스트에 한 칸을 생성해서 콜 스택에 넣는다.
- 실행 컨택스트의 환경 레코드에 식별자 TVchannel을 기록해둔다. (생성 단계)
- var로 선언했기 때문에 undefined로 값을 초기화해 둔다.
- 그 다음 맨위 console부터 읽기 시작한다.
- 현재 활성화된 실행 컨택스트의 환경 레코드를 보고 그곳에 기록된 TVChannel의 값을 참조하여 undefined를 출력한다.
- 그 다음 줄에서 TVchannel에 'Tv'라는 글자를 바인딩 해준다.
- 마지막 console을 출력하면 'Tv'라는 것이 출력된다.
var는 선언과 동시에 초기화가 이루어진다. 그 때문에 위에 콘솔에서 undefined가 실행되는 것이다.
반대로 저 경우 let과 const는 선언만 되고 초기화가 이루어지지 않기 때문에 일시적 사각지대가 일어나 에러가 뜨는 것이다.
(일시적 사각지대 : 선언 이전에 식별자를 참조할 수 없는 구역)
그 다음 함수 호이스팅을 보겠다.
study() //undefined
var study = () => {
//do study
}이렇게 함수가 있으면 var로 선언할 시에 선언과 동시에 초기화가 이루어져 undefined가 출력된다. 그렇지만 위에 함수에 var를 let이나 const로 바꾸면 Reference Error가 발생한다. 위와 같이 함수를 변수에 담고 있는 식을 함수 표현식이라고 한다.
study()
function study() {
//do study
}위는 함수 표현식이 아니다. 이것은 함수 선언문이다. 함수 선언문의 경우 함수가 선언과 동시에 함수 객체를 환경레코드에 기록을 한다.
knew
여기서는 호이스팅과 큐 스택 그리고 환경 레코드라는 것에 대해 조금 깊게 살펴본것 같다. 덕분에 자바스크립트가 돌아가는 원리를 더욱 깊게 이해 한것 같다.
마지막으로
왠지모를 어마어마한 지식이 나의 머리속으로 들어온 기분이다.
