모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다.
- 식별자가 유효한 범위
var x= 'global';
function foo() {
var x= 'local';
console.log(x); //local
}
foo();
console.log(x); //global- 스코프(유효 범위)를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있다. (식별자 이름은 동일하지만 스코프가 다른 별개의 변수)
스코프의 종류
- 코드는 전역과 지역으로 구분할 수 있다.
- 변수는 자신이 “선언된 위치”에 의해 유효한 범위 스코프가 결정된다.
| 구분 | 설명 | 스코프 | 변수 |
|---|---|---|---|
| 전역 | 코드의 가장 바깥 | 전역 스코프 | 전역 변수 |
| 지역 | 함수 몸체 내부 | 지역 스코프 | 지역 변수 |
- 전역 스코프 (Global scope)코드 어디에서든지 참조할 수 있다.
- 지역 스코프 (Local scope or Function-level scope)함수 코드 블록이 만든 스코프로 함수 자신과 하위 스코프에서만 참조할 수 있다.
변수의 관점에서 스코프
- 전역 변수 (Global variable)전역에서 선언된 변수이며 어디에든 참조할 수 있다.
- 지역 변수 (Local variable)지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.
스코프 체인
- 함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다.
- 스코프가 함수의 중첩에 의해 계층적인 구조를 갖는다.
- 모든 지역 스코프의 최상위 스코프는 전역 스코프다.
- 변수를 참조할때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.
- 상위 스코프에서 유효한 변수는 하위 스코프에서도 자유롭게 참조할 수 있지만,
하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다.
함수 레벨 스코프
- 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다.
- var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프라고 한다.
- 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다.
- 의도치 않게 전역 변수의 값이 재할당 된다.
- var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하지만,
let, const 키워드는 블록 레벨 스코프를 지원한다.
렉시컬 스코프
- 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다.
- 함수의 상위 스코프는 언제나 자신이 정의된 스코프다. (결정된 상위 스코프를 기억한다.)
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // 1
bar(); // 1
//bar 함수는 전역에서 정의된 함수로 전역 스코프를 기억한다.
//bar 함수가 호출되면 호출된 곳이 어디인지 상관없이 언제나 자신이 기억하고 있는 전역 스코프를 상위 스코프로 사용한다.