스코프 정의 : 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것
코드전체는 전역과 지역으로 구별될수있기떄문에 어떤 변수가 전역에서 선언된다면 전역스코프를 갖고 지역에서 선언되면 지역스코프를 갖게 됩니다.
그렇다면 어떠한 코드가 실행이 될때 참조하려는 변수가 전역에는 있는데 지역에는 없고, 지역에 있는데 전역에도 있고, 그럼 코드는 어떠한 변수를 참조해야 할까요?
이 개념을 이해하기 위해서 스코프 체인을 알아야합니다.
함수는 전역에서 정의가 될 수도 있지만 어떠한 함수 내부 몸체에서 정의될수있습니다. 이것을 함수의 중첩이라고 하는데요
이처럼 함수가 중첩이 된다면 각각 함수의 지역스코프도 중첩이 될 수 있겠죠. 이는 스코프가 함수의 중첩에 따라 계층적인 구조를 가질 수 있다는 것을 의미합니다.
다음 함수의 어떤 콘솔이 찍힐지 예상해볼까요?
var x = "나는 전역 x야";
function outer(){
var y = "나는 outer함수의 지역 y야";
console.log(x);
console.log(y);
function inner(){
var x = "나는 inner 함수의 지역 x야"
console.log(x);
console.log(y);
}
inner();
}
outer();
console.log(x);
console.log(y);아래와 같이 출력됩니다.
var x = "나는 전역 x야";
function outer(){
var y = "나는 outer함수의 지역 y야";
console.log(x); // 나는 전역 x야
console.log(y); // 나는 outer함수의 지역 y야
function inner(){
var x = "나는 inner 함수의 지역 x야"
console.log(x); // 나는 inner 함수의 지역 x야
console.log(y); // 나는 outer 함수의 지역 y야
}
inner();
}
outer();
console.log(x); // 나는 전역 x야
console.log(y); // ReferenceError 어쩌고inner 함수는 outer 함수의 내부에서 선언되었기 때문에 inner 함수의 상위스코프는 outer 함수의 스코프입니다. 그리고 전역에서 정의된 outer함수의 상위 스코프는 전역스코프 입니다.
이처럼 스코프가 계층적으로 연결이 되어 있는것을 스코프 체인이라고 하고 물리적으로 존재합니다.
변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조합니다. 스코프 체인에서 변수를 참조할때는 무조건 위로만 올라갑니다. 그렇기 때문에 하위 스코프에서 상위 스코프의 변수를 참조할 수 있는 이유가 스코프 체인의 단방향성 때문입니다.
스코프는 어떠한 레벨을 가지느냐에 따라 블록 레벨 스코프와 함수레벨 스코프로 구분할 수 있습니다. 대부분의 프로그래밍 언어는 함수 몸체와 더불어서 if문, for문과 같은 모든 코드 블록이 지역 스코프를 만듭니다. 이러한 특성을 블록 레벨 스코프라 하는데 반면, 자바스크립트에서는 var 키워드로 선언된 변수는 오로지 함수 코드 블록만을 지역 스코프로 인정합니다. 이를 함수 레벨 스코프라 합니다.
자바스크립트에서도 다른 프로그래밍 언어와 같이 동작하기 위해 let, const가 es6에서 등장합니다. es6 이후로는 let,const를 사용하면 모든 블록단위에 대한 스코프를 가질 수 있습니다.
다음으로, 상위 스코프가 결정되는 시점을 기준으로 스코프는 동적 스코프와 정적 스코프로 나뉜다.
동적 스코프 : 함수가 어디서 호출되는지에 따라 동적으로 상위 스코프가 결정.. 프로그램 런타임 도중에 실행컨텍스트나 호출컨텍스트에 의해 스코프가 결정됨.
함수가 정의되는시점에 결정 => 정적스코프 ( === 렉시컬 스코프 )
자바스크립트는 렉시컬 스코프를 따르기 때문에 함수는 태어나자마자 상위스코프가 결정이 되고 해당 함수에 의해 해당 함수 객체가 생성이되면 해당 객체는 본인의 상위 스코프를 항상 알 수 있습니다. 이렇게 해당 함수가 상위 스코프를 항상 알 수 있는 이유는 자바스크립트에서 함수는 태어나면서 자신의 내부슬롯에 상위 스코프의 참조를 저장하기 때문입니다.
함수 호출 => 실행 컨텍스트 생성하고 푸쉬 => 렉시컬 환경 생성 => 코드가 끝나면 pop하여 실행컨텍스트에서 제거
렉시컬 환경 : 어떠한 코드가 어디서 실행이되고 주변에 어떤 코드가 있는지 정보를 담고 있음 ( 포함하는 식별자, 식별자에 바인딩된 값, 하나의 자료구조)
