[TIL] 0106

 

자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 

1) 선언된 변수를 위로 끌어올린다. = 호이스팅 (hoisting)

2) 외부 환경 정보를 구성한다.

3) this 값을 설정한다.

 

1) 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

- 스택 (LIFO), 큐 (FIFO) / 중 스택의 한 종류인 '콜스택 (전역 outer inner ...)'에 구성

 

- 객체에 담기는 정보

* VE (VariableEnvironment) : 식별자 정보(record), 외부 환경 정보 (outer) 를 가지며, snapshot을 유지한다.

* LE (LexicalEnvironment) : VE 와 동일하나 snapshot (변경사항) 을 유지하지 않는다.

* ThisBinding : this 식별자가 바라봐야할 객체

실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담고 이를 그대로 복사하여 LE를 만들고 주로 LE를 활용한다.

 

- 호이스팅 (식별자 정보를 수집할 때의 가상개념)

 * 변수의 식별자 정보, function, 나머지 순으로 호이스팅한다.

 * record의 수집과정

 

- 함수 선언문 function a (){} 

- 함수 표현식 (익명 함수 표현식) var b = function (){}

 * 함수 선언문은 전체를 호이스팅 하지만 함수 표현식은 선언부 var b 만 호이스팅하는 차이가 있다.

 * 함수 표현식은 함수 선언부만 위로 쭉 올라가서 호이스팅 되기에 이 이후부터의 코드에만 영향을 받는다.
   따라서 협업을 많이 하고, 복잡한 코드일수록 함수 표현식을 활용해야한다.

 

- 스코프 : 식별자에 대한 유효범위 / 스코프 체인 : 식별자의 유효범위를 안에서부터 바깥으로 검색해나가는 것

 

Inner context

Outer context

전역 context

 

각각 실행 context 는 LE 안에 record 와 outer 를 가지고 있고, outer 안에는 선언될 당시의 LE 정보가 다 들어있어서 scope chain 에 의해 상위 context 의 record 를 읽어올 수 있다.

 

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

 

console.log(a) 가 undefined 가 나오는 이유는 호이스팅에 의해 inner가 

var a;

console.log(a);

a=3; 으로 호이스팅 되므로 console.log 값은 undefined 가 된다.

 

2) this

- 전역 환경에서의 this 

노드 에서는 global 객체, 브라우저 에서는 window 객체를 가진다.

 

- 함수는 독립성을 가지나, 메서드는 종속성을 가진다.

ex) 함수 ();   /    객체.메서드명 ();

 

- 함수에서의 this 는 전역 객체, 메서드 에서의 this 는 호출의 주체인 객체 이다.

- 함수로서의 호출과 메서드로서의 호출은 . 과 [] 여부로 구분할 수 있다. 있으면 메서드