Advanced Web Programming - lexical scope ( 2 )

var name = 'zero'; // (1)변수 선언 (6)변수 대입
function wow(word) { // (2)변수 선언 (3)변수 대입
  console.log(word + ' ' + name); // (11)
}
function say () { // (4)변수 선언 (5)변수 대입
  var name = 'nero'; // (8)
  console.log(name); // (9)
  wow('hello'); // (10)
}
say(); // (7)

일단 처음 코드를 실행(여기서 실행은 브라우저가 스크립트를 로딩해서 실행하는 걸 말합니다..)하는 순간 모든 것을 포함하여 전역 컨텍스트가 생깁니다. 모든 것을 관리하는 환경입니다. 페이지가 종료될 때까지 유지됩니다. 전역 컨텍스트 말고도 함수 컨텍스트가 있습니다. 자바스크립트는 함수 스코프를 따른다고 했었습니다. 함수를 호출할 때마다 함수 컨텍스트가 하나씩 더 생깁니다. 

 

• 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생깁니다.
• 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성됩니다.
• 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾습니다.
• 함수 실행이 마무리되면 해당 컨텍스틑 사라집니다. (클로저 제외)페이지가 종료되면 전역 컨텍스트가 사라집니다.

전역 컨텍스트

전역 컨텍스트가 생성된 후 두 번째 원칙에 따라 변수 객체, scope chain, this가 들어옵니다. 전역 컨텍스트는 arguments가 없고, variable은 해당 스코프의 변수(name, wow, say)가 있겠습니다. 그리고 scope chain은 자기 자신인 전역 변수객체입니다. this는 따로 설정되어 있지 않으면 window입니다. this를 바꾸는 방법이 바로 new를 호출하는 겁니다. 또는 함수에 다른 this값을 bind할 수도 있습니다. 일반 함수의 this가 이 이유에서 window가 됩니다. 원래 기본적으로 window이고 new나 bind같은 상황에서는 this가 바뀌는 것입니다.

'전역 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name', 'wow', 'say'],
  },
  scopeChain: ['전역 변수객체'],
  this: window,
}