모든 식별자(변수 이름, 함수 이름, 클리스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다.
즉, 스코프는 식별자가 유효한 유효 범위를 말한다. 또한 스코프를 통해 어떤 변수를 참조할 것인지 결정하기 때문에 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이다.
또한 스코프를 통해 식별자인 변수의 이름 충돌을 방지해 같은 이름의 변수를 사용할 수 있다. 스코프 내의 식별자는 유일해야하지만 다른 스코프에는 같은 이름의 식별자를 사용할수 있는 네임스페이스 역할을 하는 것이다.
스코프의 종류
스코프는 전역스코프와 지역스코프로 나눌 수 있다.
이때 var, let, const의 스코프는 서로 다르게 동작한다.
전역과 지역스코프
전역은 코드의 가장 바깥 영역을 말한다. 전역은 전역 스코프를 만들고 전역에 변수를 선언하면 전역 스코프를 가지게 된다. 따라서 전역 변수는 어디서든지 참조할 수 있다.
지역은 함수 몸체 코드 블럭 내부를 말한다. 지역은 지역 스코프를 만들고 지역에 변수를 선언하면 지역 스코프를 가지게 된다. 지역 변수는 자신이 선언된 지역과 하위 지역에서만 참조가 가능하다. 따라서 지역변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.
//전역변수이므로 전역 스코프
var global = "전역";
function outer(){
//지역변수 이므로 지역스코프
var local = "지역";
console.log(global); //전역
console.log(local); //지역
function inner(){
var local2 = "지역2";
console.log(global); //전역
console.log(local); //지역
console.log(local2); //지역2
}
inner();
}
outer();스코프 체인
함수는 중첩될수 있기 때문에 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다. 모든 스코프는 하나의 계층적 구조이기 때문에 모든 지역 스코프의 최상위 스코프는 전역스코프가 된다. 이렇게 계층적으로 연결된 스코프를 스코프 체인이라고 한다.
변수를 참조할 때 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작해 상위 스코프 방향으로 이동하며 변수를 찾는다. 따라서 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있게 된다.
반대로 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수는 없다.
스코프 체인은 물리적인 실체로 존재하는 구조이며 자바스크립트 엔진은 코드를 실행전 렉시컬 환경을 실제로 생성한다.
함수 레벨 스코프
코드블록(if, for, while, try/catch 등)이 아닌 함수에 의해서만 지역 스코프가 생성된다. 이러한 특징을 함수 레벨 스코프라고 한다.
var 키워드로 선언된 변수는 오직 함수의 코드블록만 지역 스코프로 인정하지만 let과 const는 블록 레벨 스코프를 지원한다.
렉시컬 스코프
함수의 스코프는 두가지 패턴으로 예측할 수 있다.
- 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정
- 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정
첫번째 방식은 동적 스코프라고 한다. 함수를 정의할때는 함수가 어디서 호출되었는지 모르기때문에 함수가 호출되는 시점에 동적으로 스코프를 구성해 동적 스코프라고 부른다.
두번째 방식은 정적 스코프 또는 렉시컬 스코프라고 한다. 함수가 호출된 위치는 상위 스코프 결정과 전혀 상관이 없으며 어디에서 정의했는지가 가장 중요하다. 즉 함수의 상위 스코프는 언제나 자신이 정의된 스코프이다.
자바스크립트는 렉시컬 스코프를 사용한다.
var num = 1;
function func(){
var num = 24;
test();
}
function test(){
console.log(num);
}
func(); //1
test(); //1위 예제를 보면 test함수는 전역에서 정의된 함수이다. 따라서 런타임 이전에 test함수는 전역 스코프를 기억하게 되며 자신이 호출된 곳이 어딘지와 관계 없이 자신이 기억하고 있는 전역 스코프를 상위 스코프로 사용한다.
📔출처
위키북스 - 모던 자바스크립트 Deep Dive
https://wikibook.co.kr/mjs/
