스코프란?
유효 범위, 자바스크립트 엔진이 식별자를 검색할 때 사용되는 규칙, 네임스페이스
- var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프는 다르게 동작
- 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다 → 스코프 → 식별자가 유효한 범위
- 식별자 결정: 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지를 결정
- 렉시컬 환경은 코드의 문맥 → 실행 컨텍스트로 구현 → 모든 코드는 실행 컨텍스트에서 평가되고 실행된다.
- var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용됨
- let 또는 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언 허용되지 않음
스코프의 종류
전역 스코프, 지역 스코프
- 변수는 자신이 선언된 위치에 의해 스코프가 결정됨
- 전역 변수는 어디서든지 참조할 수 있다.
- 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.
스코프 체인
스코프가 계층적으로 연결된 것
- 중첩 함수: 함수 몸체 내부에서 정의한 함수
- 외부 함수: 중첩 함수를 포함하는 함수
- 스코프는 함수의 중첩에 의해 계층적 구조를 갖는다.
- 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.
- 물리적인 실체로 존재 → 자바스크립트 엔진은 코드를 실행하기에 앞서 렉시컬 환경이라는 자료구조를 생성함
함수 레벨 스코프
var 키워드로 선언된 변수는 오직 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정함
var i = 10;
for(var i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
console.log(i); // 5
// 함수 몸체가 없기 때문에 for문을 통해 재할당된 마지막 i가 전역변수로 의도치 않게 변경됨.
렉시컬 스코프
함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 것, 정적 스코프
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // 1
bar(); // 1
- 함수 선언문으로 전역에서 정의된 bar 함수는 전역 코드가 실행되기 전에 먼저 평가되어 함수 객체를 생성 → 생성된 bar 함수 객체는 자신이 정의된 스코프(전역 스코프)를 기억 → bar 함수가 호출되면 호출된 곳이 어디인지 관계없이 자신이 기억하고 있는 전역 스코프를 상위 스코프로 사용한다.
- 클로저와 깊은 관계가 있다.