[Java Script] 스코프 체인

- 자바스크립트도 다른 언어와 마찬가지로 스코프, 즉 유효 범위가 있다.

- 자바스크립트에서는 오직 함수만이 유효 범위의 한 단위가 된다.

- 스코프 체인 : 유효 범위를 나타내는 스코프가 [[scope]] 프로퍼티로 각 함수 객체 내에서 연결 리스트 형식으로 관리되는 것

 

- 각각의 함수는 [[scope]] 프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조한다.

=> 함수가 실행되는 순간 실행 컨텍스트가 만들어지고, 이 실행 컨텍스트는 실행된 함수의 [[scope]] 프로퍼티를 기반으로 새로운 스코프 체인을 만든다.

 

1. 전역 실행 컨텍스트의 스코프 체인

var var1 = 1;
var var2 = 2;
console.log(var1); //1
console.log(var2); //2

- 위의 코드를 실행하면 먼저 전역 실행 컨텍스트가 생성되고 ,변수 객체가 만들어진다.

=> 전역 실행 컨텍스트 단 하나만 실행되고 있어 참조할 상위 컨텍스트가 없다.

=> 해당 변수 객체의 스코프 체인은 자기 자신만을 가진다.

=> 이 변수 객체가 전역 객체가 된다.

 

2. 함수를 호출한 경우 생성되는 실행 컨텍스트의 스코프 체인

var var1 = 1;
var var2 = 2;

function func(){
    var var1 = 10;
    var var2 = 20;
    console.log(var1); //10
    console.log(var2); //20
}

func();
console.log(var1); //1
console.log(var2); //2

- 위의 코드를 실행하면 전역 실행 컨텍스트가 생성되고, func() 함수 객체가 만들어진다.

=> func 함수 객체의 [[scope]]는 현재 실행되는 컨텍스트인 전역 변수 객체가 된다.

=> 그리고 func 함수를 실행하면 새로운 func 컨텍스트가 만들어지고, 해당 컨텍스트의 스코프 체인은 실행된 함수의 [[scope]] 프로퍼티를 그대로 복사한 후, 현재 생성된 변수 객체를 복사한 스코프 체인의 맨 앞에 추가한다.

• 각 함수 객체는 [[scope]] 프로퍼티로 현재 컨텍스트의 스코츠 체인을 참조한다.
• 함수가 실행되면 새로운 실행 컨텍스트가 만들어지는데, 해당 실행 컨텍스트는 현재 실행되는 함수 객체의 [[scope]] 프로퍼티를 복사하고, 새롭게 생성된 변수 객체를 해당 체인의 제일 앞에 추가해서 스코프 체인을 만든다.
• 스코프 체인 = 현재 실행 컨텍스트의 변수 객체 + 상위 컨텍스트의 스코프 체인

* 식별자 인식은 스코프 체인의 첫 번째 변수 객체부터 시작한다. 식별자와 대응되는 이름을 가진 프로퍼티가 있는지를 확인한다.

 

+ with

: 스코프 체인을 사용자가 임의로 수정하는 키워드이다.

: 성능을 높이고자 하는 자바스크립트 프로그래머에게는 사용하지 말아야 할 키워드이다.

: with 구문은 표현식을 실행하는데, 표현식이 객체이면 객체는 현재 실행 컨텍스트의 스코프 체인에 추가된다.

var y = { x:5 };

function withExamFunc(){
    var x = 10;
    with(y){
        x = function(){
            console.log(x); // 5 : y 객체의 x가 출력된다.
        }
    }
}
withExamFunc();