13장 스코프

* 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. *

 

스코프

- 유효범위, 자바스크립트에서 크게 예시로 드는 것은 var와 let, const 차이

- 모든 식별자(변수, 함수, 클래스 이름 등) 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 말한다.

- 식별자가 유효한 범위

 

var 와 let의 비교 코드

// var 예시
function foo() {
    var x = 1;
    // 여기서 자바스크립트 엔진이 아래 코드를 var가 없는 x 재할당으로 인식하고 동작한다.
    var x = 2;
    console.log(x); // 2
}
foo();

// let 예시
function bar() {
    let x = 1;
    // let, const 로는 같은 스코프 내에서 중복 선언을 허용하지 않는다.
    let x = 2; // SyntaxError: Identifier 'x' has already been declared
}
bar();

 

스코프의 종류

구분	설명	특징
전역 스코프	코드의 가장 바깥 영역	- 어디서든 참조할 수 있음
지역 스코프	함수 내부	- 자신의 지역 스코프 및 하위 지역 스코프에서 참조 가능

 

스코프 체인

- 스코프가 계층적으로 연결된 것을 말한다.

- 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드이 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.

 

함수 레벨 스코프

- 함수에 의해서만 지역 스코프가 생성된다는 의미

- var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.

(if, for, while, try/catch 등의 블록 레벨 스코프는 인정하지 않음)

var x = 1;

if (true) {
    // var 키워드로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정함
    // 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역변수로 해당
    // 따라서 x는 전역 변수다
    // 이미 선언된 전역 변수가 있으므로 재할당이 일어난다.
    var x = 10;
}
console.log(x); // 10

for, while, try/catch에 경우에도 위와 같은 상황이 발생하게 된다.

 

렉시컬 스코프

- 정적 스코프라고도 부른다.

- 동적 스코프 방식처럼 상위 스코프가 동적으로 변하지 않고, 함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정되기 때문에 정적 스코프라고 부른다.

- 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.

- 렉시컬 스코프는 클로저와 깊은 관계가 있다. (책의 24장 참조)

var x = 1;

function foo() {
    var x = 10;
    bar();
}

function bar() {
    console.log(x);
}

foo(); // ?
bar(); // ?

결론부터 말하자면 foo, bar 함수의 결과값은 둘 다 1이 나온다.

자바스크립트는 렉시컬 스코프를 따르므로 "함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지"에 따라 상위 스코프를 결정한다.

즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.