13.1 스코프란?
스코프는 식별자가 유효한 범위를 의미한다.
ex) 함수 매개변수의 스코프(유효범위)는 함수 내부로 한정된다.
function add(x, y) {
// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
// 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다.
console.log(x, y); // 2 5
return x + y;
}
add(2, 5);
// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
console.log(x, y); // ReferenceError: x is not definedJS엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지를 결정한다. 이를 '식별자 결정'이라고 부른다.
var x = 'global';
function foo() {
var x = 'local';
console.log(x); // local
}
foo();
console.log(x); // global렉시컬 환경(exical environment) : 코드가 어디서 실행되며 주변에 어떤 코드가 있는지
코드 문맥(Context)는 렉시컬 환경으로 이루어진다. 이를 구현한 것이 "실행 컨텍스트"이며 스코프와 깊은 관련이 있다. (23장에서 다룰 예정)
만약 스코프라는 개념이 없다면, 같은 이름을 갖는 변수가 충돌을 일으키므로 프로그램 전체에서 각자 고유한 식별자만을 사용해야 한다.
Q. 같은 이름의 식별자를 중복해서 사용한다?
식별자는 값을 구별할 수 있어야 하므로 유일해야 한다.
따라서 식별자는 중복될 수 없다.
스코프 내에서 식별자는 유일해야 하지만 다른 스코프에는 같은 이름의 식별자가 있어도 된다.
스코프는 NameSpace이다.
13.2 스코프의 종료
스코프는 전역과 지역으로 나뉜다.
전역 스코프 : 코드의 가장 바깥 영역
지역 스코프 : 함수 내부
변수를 선언하는 위치에 따라 스코프의 종류가 결정된다.
이때 전역 변수는 어디서든지 참조할 수 있다.
반면에 지역 스코프는 자신의 지역 스코프와 하위 지역 스코프에서만 유효하다.
13.3 스코프 체인
Javascript는 함수 내부에 새로운 함수를 정의할 수 있다.
이때 내부에 정의한 함수를 "내부 함수"라고 부르고,
외부에 정의한 함수를 "외부 함수"라고 부른다.
이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의마한다.
// 전역 스코프 영역
function outer(){ //지역 스코프 영역
let outerVal = "outer"
function inner(){ // 하위 스코프 영역
console.log(outerVal);
let innerVal = "inner";
console.log(innerVal);
}
inner();
}
outer();위의 예제를 보면 inner 함수가 outer 함수 내부에 선언된 것을 볼 수 있다.
inner 함수의 상위 지역 스코프는 outer 함수의 지역 스코프이다.
그리고 outer 함수의 상위 지역 스코프는 전역 스코프이다.
이런 식으로 스코프가 계층적 구조로 연결된 것을 "스코프 체인"이라고 한다.
JS 엔진은 변수를 참조할 때 해당 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.
절대로 하위 스코프로 내려가면서 변수를 검색하지 않는다. (하위 스코프 변수를 상위 스코프에서 사용 불가)
ex) outerVal을 찾을 때 inner 함수 지역 스코프에서 검색을 시작하여 outer 함수 지역 스코프에서 outerVal를 찾는다.
스코프 체인은 물리적 실체로 존재한다.
JS엔진은 코드를 실행하기 전에 렉시컬 환경을 생성한다.
변수가 선언이 되면 해당 식별자가 렉시컬 환경에 'Key'로 등록되고 이를 통해 변수 검색이 이루어짐.
함수 레벨 스코프
함수의 코드 블록(함수 내부)만을 지역 스코프로 인정하는 것을 의마한다.
var 키워드는 함수 레벨 스코프를 이용하므로 if / for / while 같은 기타 코드 블럭에서 지역 스코프가 생성되지 않고 오로지 함수 내부에서만 지역 스코프를 생성하게 된다.
var i = 10;
// for 문에서 선언한 i는 전역 변수다. 이미 선언된 전역 변수 i가 있으므로 중복 선언된다.
for (var i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}
// 의도치 않게 변수의 값이 변경되었다.
console.log(i); // 5var 키워드는 함수 내부만을 지역 스코프로 생성하기 때문에 위와 같이 for문에서 선언된 i도 전역 변수 취급을 한다.
의도치 않은 전역 변수 생성 및 변경이 일어난다.
ES6에서 블록 레벨 스코프인 let,const 키워드가 도입됨.
13.5 렉시컬 스코프
let x = 5;
function foo(){
let x = 10;
bar();
}
function bar(){
console.log(x);
}
foo(); // 1
bar(); // 2위의 코드의 실행 겨과는 bar 함수의 상위 스코프가 무엇인지에 따라 결정된다.
- 함수를 어디서 호출했는지에 따라 상위 스코프 결정
- 함수를 어디서 정의했는지에 따라 상위 스코프 결정
크게 위의 2가지 패턴을 생각할 수 있다.
첫 번째 방식은 "동적 스코프"라고 한다.
함수가 호출되는 시점에 동적으로 상위 스코프가 결정된다.
두 번째 방식은 "정적 스코프" & "렉시컬 스코프"라고 한다.
함수가 어디서 정의했는지에 따라 상위 스코프가 결정된다.
함수 정의(선언문, 표현식)이 실행될 때 함수 객체가 상위 스코프를 기억한다.
Javascript을 포함하여 대부분 언어는 렉시컬 스코프를 따른다.
위의 코드의 결과는 따라서 bar의 상위 스코프인 전역 스코프에서 x를 검색하기 때문에 1,2번 결과 둘 다 5이다.
