1~3주차까지 강의 내용을 복습하면서 전반적인 이해도가 상승했다. 전에 이해가 안 가던 부분도 해결됐다. 역시 이해가 안 되는 건 시간을 두고 오게 둬야한다.
실행컨텍스트
실행컨텍스트란 실행할 코드에 제공할 환경정보를 모아놓은 객체를 말한다. 그렇다면 그 객체에 담기는 정보는 뭘까?
-
VE(VariableEnvironment)
record(식별자정보 ex. var a), outer(외부환경정보)를 갖고 있다. -
LE(LexicalEnvironment)
LE는 VE와 똑같지만 둘을 나누는 기준이 있다. 변경사항 여부이다.
초기값이 설정되고 변경사항이 주어졌을 때 VE는 변경사항을 반영하지 않는다. 기존 상태를 유지한다. 이것을 Snapshot이라고 한다. 그러나 LE는 VE와 반대로 실시간으로 변경사항을 반영한다.
- ThisBinding
디스바인딩이란 this가 함수안에서 어떤 기능을 할지 결정해주는 역할을 한다.
this는 실행 컨텍스트가 생성될 때 결정된다. --> this는 함수를 호출(실행)할때 결정된다.
+화살표 함수의 경우 this를 바인딩하지 않는다. 기본 함수에서 this는 전역 객체를 바라본다. 이 점(this가 전역 객체를 보지 않는 것)을 개선하기 위해서 es6에서 화살표 함수를 도입했다고 한다.
LE - 스코프체인, outer -
스코프체인이란 식별자의 유효 범위를 안에서 바깥으로 검색해나가는 것을 말한다.
outer란 스코프체인이 가능토록 만든다.
var a =1;
var outer = function (){
var inner = function (){
console.log(a);
var a = 3;
};
inner();
console.log(a); //
}
outer(); //outer의 상위 컨텍스트는 전역 컨텍스트 var a = 1;네 번째 줄과 여덟 번째 줄 콘솔의 경우 값은 뭐가 나올까? undefined과 1이 나온다.
-
why? 네 번째 줄의 경우 호이스팅에 의해 변수 a가 콘솔에 영향을 끼치지 못한다. 그래서 undefined이 나온다.
-
why? 여덟 번째의 경우 inner함수가 끝나면서 콜스택에서 사라진다. 그래서 var a =3;을 참조하지 못한다. 하지만 outer함수는 선언될 당시에 LE를 참조할 수 있다. 그래서 var a =1; 을 참조한 값 1을 출력한다.
호이스팅
호이스팅이란 VE와 LE가 가지고 있는 record(=식별자정보)를 수집하는 과정을 말한다. 현재 컨텍스트와 관련된 코드의 식별자들이 수집된다. 매개변수 및 변수는 '선언부'를, 함수는 '함수 전체'를 호이스팅한다. 단 이때 수집한다고 했지 실행하는 것은 아니다. 실행은 수집 이후에 일어난다.
함수의 경우 '함수 전체'를 호이스팅한다고 했지만 '예외'가 존재한다. 함수가 기본형이 아닌 표현식으로 사용됐을 때다. 만약 함수가 표현식으로 사용됐다면 변수와 마찬가지로 함수 선언부만 호이스팅된다.
why?
주니어가 시니어와 협업시 함수 선언문을 사용하면 문제가 될 수 있기 때문이다. 만약 협업 전 시니어가 기본 함수 선언문을 통해 작업을 하고 있었다고 가정해보자. 합류한 주니어가 실수로 기본 함수 선언문을 보지 못하고 새로운 함수 선언문 코드를 짰다면? 호이스팅 규칙에 따라 두 개의 함수 선언문이 위로 올라가 전역으로 영향을 끼치게 된다. 즉 코드가 꼬이는 것이다.
so
함수 표현식은 선언부만 호이스팅하기에 아래 부분에만 영향을 끼친다. 그래서 오류가 발생했을때 대처가 가능하다. 그러니 협업시에는 기본 함수보다는 함수 표현식을 사용하자.
