[JavaScript] 스코프

스코프(Scope)란?

스코프는 직역하자면 "범위"라는 뜻이고, 자바스크립트에서의 스코프는 식별자가 유효한 범위를 뜻합니다.

변수 이름, 함수 이름, 클래스 이름 등 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식벽자 자신을 참조할 수 있는 유효 범위가 결정되는데 이 유효 범위가 스코프입니다.

// 전역 변수
var x = 'global';

function foo() {
    // 지역 변수
    var x = 'local';
    console.log(x); // "local"
}

console.log(x); // "global"

• 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지 식별자 결정해야함
• 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙
• 스코프 내에서 식별자는 유일해야함 (다른 스코프에는 같은 이름의 식별자 사용 가능, C++의 네임스페이스와 비슷함)

 

스코프의 종류

변수와 같은 식별자는 자신이 선언된 위치에 의해 자신이 유효한 범위인 스코프가 결정됩니다. 이때 위치는 전역과 지역으로 구분할 수 있습니다.

구분	설명	스코프	변수
전역	- 코드의 가장 바깥 영역 - 어디서든지 참조 가능	전역 스코프	전역 변수
지역	- 함수 몸체 내부 - 자신의 지역 스코프와 하위 지역 스코프에서 유효	지역 스코프	지역 변수

 

스코프 체인

자바스크립트 엔진은 스코프 체인을 통해 참조할 변수를 검색합니다. 스코프는 함수의 중첩에 의해 계층적 구조를 갖는데, 이렇게 계층적으로 연결된 것을 스코프 체인이라 합니다. 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다.

 

// 전역 스코프
var x = "global x";
var y = "global y";

function outer() {
    // 지역 스코프
    var z = "outer's local z";
    
    console.log(x); // "global x"
    console.log(y); // "global y"
    console.log(z); // "outer's local z"
    
    function inner() {
        var x = "inner's local x";
        
        console.log(x); // "inner's local x"
        console.log(y); // "global y"
        console.log(z); // "outer's local z"
    }
    
    inner();
}

outer();

console.log(x); // "global x"
console.log(z); // ReferenceError

 

위의 코드의 스코프 체인을 그림으로 표현하면 다음과 같습니다.

• 위 그림과 유사한 자료구조인 *렉시컬 환경을 실세로 생성 (물리적으로 존재함)
• 변수 선언이 실행되면 변수 식별자가 렉시컬 환경에 키로 등록됨
• 변수 할당이 일어나면 렉시컬 환경의 변수 식별자에 해당하는 값을 변경
• 변수의 검색도 렉시컬 환경에서 이루어짐

*렉시컬 환경 : 코드가 어디서 실행되며 주변에 어떤 코드가 있는지. 스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향 연결한 것임.

 

자바스크립트 엔진은 스코프 체인을 따라 변수를 참조하는 코드의 스코프에서 시작해서 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다. 위의 예시 코드와 함께 살펴보면 아래와 같습니다.

• inner()함수의 console.log(y)문은 지역 스코프에서 y변수가 없으면, 상위 스코프 outer()를 검색하여 해당 함수에도 없기 때문에 outer()의 상위 스코프인 전역 스코프로 이동하여 "global y"를 출력
• 전역에 있는 console.log(z)문은 자신의 스코프인 전역에 z변수가 없으므로 ReferenceError가 발생
• Java의 상속과 유사한 개념

변수와 마찬가지로 함수도 식별자에 해당되기 때문에 스코프를 가지게 됩니다. 결론적으로 스코프는 식별자를 검색하는 규칙이라 정의할 수 있습니다.

 

함수 레벨 스코프

지역 스코프가 함수 몸체 내부를 스코프로 가지는 것처럼, 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성되는 것을 함수 레벨 스코프라합니다. 대부분의 프로그래밍 언어는 블록 레벨 스코프인 반면 자바스크립트의 var 키워드로 선언된 변수들은 함수 레벨 스코프 특성을 가집니다.

종류	설명	키워드
함수 레벨 스코프	오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정	var
블록 레벨 스코프	모든 코드 블록이 지역 스코프를 생성	let, const

var x = 1;

if(true) {
    var x = 10;
}

console.log(x); // 10

 

렉시컬 스코프

 

프로그래밍 언어에서 함수의 상위 스코프를 결정하는 방법에는 동적 스코프와 렉시컬 스코프 2가지가 존재합니다.

• 동적 스코프 : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정
• 렉시컬(정적) 스코프 : 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정

var x = 1;

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

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

foo(); // 1
bar(); // 1

자바스크립트는 렉시컬 스코프를 따라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정하게 됩니다. 즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프이기 때문에 위와 같은 상황에서 bar()는 어디서 호출되던 bar()의 상위 스코프인 전역 변수x의 값 1을 출력하게 됩니다.

 

 

 

[출처] 모던 자바스크립트 Deep Dive

https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리