티스토리 뷰
자바스크립트 언제 컨텍스트를 생성 언제없앨까?
자바스크립트 엔진은 콜스텍이라는 통에 전역 실행컨텍스트를 담습니다.
만약 전역에서 함수 A를 호출하게된다면, 함수 A의 실행컨텍스트를 담는다.
위에서 내려다봤을때 활성화된 실행컨텍스트 = function A의 실행 컨텍스트
만약 함수 a에서 함수 b가 호출되면?
또 실행 컨텍스트를 담는다.
함수 b종료되면 뒤에서부터 주루룩 다시 사라지게된다.
어제배운 호이스팅과 연관지어보기
console.log(TVChannel); // undefined
var TVChannel = 'netflix'
console.log(TVchannel); // netflix
호이스팅이되어서, 변수의 선언과 초기화가 개별적으로 일어나기때문에
선언라인 전에도 변수를 참조할 수 있다.
사실 호이스팅은 물리적으로 강제적으로 끓어올린것이아니다.
자바스크립트 엔진이 먼저 변수 같은 정보를 실행 컨텍스트 어딘가에 미리 기록해놓는데
이것이 바로
환경 레코드 이다. '식별자' 와 '식별자'에 바인딩된 값을 기록해두는 객체
변수가 어떻게 저장되는지를 한번 봐보자
어제 배운것처럼 변수 호이스팅, 함수 호이스팅
다시 맨앞으로돌아가서,
1.우선 콜스택에 전역 실행컨텍스트를 생성해서 넣습니다.
2.그 후 선언된게 있는지 한번 슥 훑어보는 작업을한다. 찾으면 먼저 생성한다. (TVChannel을 생성, 값이 아직 할당이안됨. )
생성단계 : 실행 컨텍스트를 생성한다. 선언문만 실행해서 환경레코드에 기록한다.
실행단계 : 선언문 외 나머지 코드 순차적으로 실행 환경레코드에서 참조하거나 업데이트 시킨다.
변수의 생성과 초기화가 개별적으로 이루어진다는말 == 실행컨텍스트에서 생성단계와 실행단계가 개별적으로 이루어짐.
이 상태에서 이제, TVChannel에 바인딩된 값이 뭔지알아야되는 단계이다 = 실행단계
그렇다면 환경레코드의 값을 보고서 이미기록된 TVChannel을 참조해서 Undefined가나온다.
console.log(TVChannel); // undefined
var TVChannel = 'netflix'
console.log(TVchannel); // netflix
맨 윗 칸이 undefined인 이유
이후 다음줄을읽고 netflix를 집어넣게된다.
console.log(TVChannel); // undefined
const TVChannel = 'netflix'
console.log(TVchannel); // netflix
const로 바뀌면? 호이스팅은 되지만, 값을 기록해두지는 않는다. (TDZ에 의해서.)
그래서 값을알수없어서 레퍼런스 에러이다!
var키워드는 선언과 초기화가 동시에 이루어진다.
let const 초기화 값을 넣지않음
이제 함수호이스팅!
함수 표현식은 변수 호이스팅과 같은방식이다.
함수와 undefined는 다르기에 type error(var로 지정할시에)
이번엔 함수 선언문일때는?
자바스크립트엔진이 변수선언과 동시에 완성된 함수객체를 환경레코드에 기록을한다.
그래서 에러없이 실행이된다.
선언과 동시에 함수가 생성된다!
환경레코드의 값! 즉 선언과 초기화가 동시에 이루어지는지 아닌지 중요하다
let const -> 초기화 x = tdz때문에
'환경레코드' 중요하다
이제 아우터로
JS스코프체이닝 이해하기
Outer Environment Reference = 외부환경참조
바깥 렉시컬 환경을 가리킴 환경레코드 + 외부환경참조 = 렉시컬환경
lamp의 값을 찾아내서 나타낸다.
함수선언문이니까 안에 있는 내용들이 통째로 기록이될테다. 그리고 이함수를 실행시먄? (goTO2F()가 실행되면?)
==> 새로운 실행컨텍스트가 만들어진다.
램프의 값을 참조하려고보니
이렇게 두개가있다. 켜진거하나 꺼진거 하나. 그래서 자바스크립트 엔진은 고민을 함....
'식별자 결정' 이라고 합니다. : 코드에서 변수나 함수의 값을 결정하는 것
콜스택안에 동일한 식별자가 여러개 일때 , 자바스크립트 엔진이 어떻게 outer를 활용해서 의사결정을 할까용?
위의 램프인 goTo2F(); 실행컨텍스트가 생성될떄 outer를 생성해둔다
pet의 값을 결정하기위해 현재 활성화된 환경레코드부터 보고
puppy니까 puppy를 출력해낸다.
만약에 console.log(corna)를 하면? //? 그럼 outer를 타고 바깥으로 바깥으로 계속 찾으러 감. 그리고
전역 실행컨텍스트는 최상위 실행컨텍스트인데 없으니까 레퍼런스에러!! 를 내뿜는다.
그럼 console.log(lamp)를 하면? 2층에서 이미 lamp를 찾아서 1층에서 안찾아낸다. 그래서 2층이나 3층은 1층의 lamp가 켜진지어ㄷ쩐지모른다.
변수 섀도잉: 동일한 식별자로인해 상위 스코프의 선언된 식별자의 값이 가려지는 현상.
이렇게 식별자를 결정할때 outer를 사용하여 타고타고 갈수있어서 값을 찾을수있었는데 이렇게 스코프의 연결리스트는 스코프체인
타고타고 가서 찾는 과정자체 = 스코프체이닝
실행컨텍스트?
코드를 실행하는데 필요한 환경을 제공하는 객체
lamp를 결정하기위해 고민을 하던 자바스크립트 엔쥔스~
얘는 실행컨텍스트만 보고도 값을 잘 찾았듬!!
그렇기에 실행컨텍스트는
