13.1 스코프란?
1) scope = 식별자가 유효한 범위
2)
function add(x, y) {
console.log(x, y);
return x + y;
}
add(2, 5);매개변수 x, y 는 함수 몸체 내부에서만 참조할 수 있다. 즉, 매개변수의 scope는 함수 몸체 내부이다.
3)
var x='global';
function foo(){
var x='local';
console.log(x);
}
foo();
console.log(x);코드의 가장 바깥 영역과 foo 함수 내부에 같은 이름을 갖는 x 변수를 선언했다. 가장 바깥 영역에 있는 x 변수는 어디서든 참조할 수 있지만, foo 함수 내부에 있는 x 변수는 foo 함수 내부에서만 참조할 수 있다. 즉 이 두 개의 x 변수는 식별자 이름은 동일하지만 스코프가 다르다. 따라서 별개의 변수이다.
JavaScript 엔진은 스코프를 통해 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지를 결정한다. 이를 식별자 결정이라고 한다.
따라서, 스코프란 JavaScript 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.
4) var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다. let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
13.2 스코프의 종류
1) 코드는 global과 local로 구분할 수 있다.
2) global은 코드의 가장 바깥 영역을, local은 함수 몸체 내부를 말한다.
3) 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다. 전역 변수는 어디서든지 참조할 수 있다.
4) 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.
13.3 스코프 체인
1) 함수는 중첩될 수 있으므로, 함수의 지역 스코프도 중첩될 수 있다. 이는 곧 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다.
2) 스코프가 계층적으로 연결된 것을 scope chain이라고 한다.
JavaScript 엔진은 scope chain을 통해 식별자를 참조하는 코드의 scope에서 시작하여, 상위 scope 방향으로 이동하며 식별자를 검색한다.
이때, 절대 하위 scope 방향으로는 이동하지 않는다. 이를 통해 상위 스코프에서 유효한 식별자는 하위 스코프에서 자유롭게 참조할 수 있지만, 그 반대는 허용되지 않는다는 것을 알 수 있다.
3) scope chain은 물리적인 실체로 존재한다. JavaScript 엔진은 코드를 실행하기에 앞서, scope와 유사한 자료구조인 lexical 환경을 실제로 생성한다.
변수 선언이 되면, 변수 식별자가 lexical 환경에 key로 등록된다.
변수 할당이 되면, 이 자료구조의 변수 식별자에 해당하는 값을 변경한다.
변수의 검색도 이 자료구조(lexical environment) 상에서 이뤄진다.
전역 렉시컬 환경은 코드가 로드되면 곧바로 생성된다.
함수의 렉시컬 환경은 함수가 호출되면 곧바로 생성된다.
scope chain은 실행 컨텍스트의 lexical 환경을 단방향으로 연결한 것이다.
13.4 함수 레벨 스코프
1) block level scope
대부분의 프로그래밍 언어는, 함수 몸체만이 아니라 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만든다. 이러한 특성을 block level scope이라고 한다.
2) function level scope
하지만, var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 function level scope라고 한다.
var x = 1;
if(true){
var x = 10;
}
console.log(x); //10함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내(if, for, ...)에서 선언되었다고 할지라도 모두 전역 변수이다. 따라서 x는 전역 변수이다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다.
3) ES6에서 도입된 let과 const 키워드는 블록 레벨 스코프를 지원한다.
13.5 렉시컬 스코프
1) dynamic scope
함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.
2) lexical scope(=static scope)
함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다. JavaScript를 비롯한 대부분의 프로그래밍 언어는 lexical scope를 따른다.
var x = 1;
function foo(){
var x = 10;
bar();
}
function bar(){
console.log(x);
}
foo(); //1
bar(); //1함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다. 따라서, bar 함수의 상위 스코프는 항상 foo 함수가 아닌 전역 스코프이다. 그러므로, foo 함수를 실행했을 때, bar 함수를 실행했을 때 모두 10이 아닌 1이 출력된다.
