🌸13장. 스코프

✅13.1 스코프란?

스코프(scope) == 식별자가 유효한 범위 == 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙

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

식별자 결정(identifier resolution)

자바스크립트 엔진이 어떤 변수를 참조해야할 지 결정하는 것

var x = "global";

function foo() {
    var x = "local";
    console.log(x); // (1) local
}

foo();
console.log(x); // (2) global

• 자바스크립트 엔진은 코드를 실행할 때 코드의 문맥(context)을 고려한다.

• 코드가 어디에서 실행되고 주변에 어떤 코드가 있는지(렉시컬 환경)에 따라 동일한 코드(1과 2)도 다른 결과를 만든다.

스코프는 네임스페이스다.

스코프 내에서 식별자는 유일해야하지만, 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다.

• 식별자는 어떤 값을 구별할 수 있어야하므로 유일해야한다. → 식별자인 변수 이름은 중복될 수 없다. ⇒ 하나의 값은 유일한 식별자에 연결(name binding)되어야 한다.

✅13.2 스코프의 종류

변수는 자신이 선언된 위치(전역/지역)에 의해 자신이 유효한 범위인 스코프가 결정된다.

구분	설명	스코프	변수
전역	코드의 가장 바깥 영역	전역 스코프	전역 변수
지역	함수 몸체 내부	지역 스코프	지역 변수

• 전역변수는 어디서든지 참조할 수 있다.

• 지역변수는 자신의 지역 스코프와 하위 지역 스코프에서 참조할 수 있다.

✅13.3 스코프 체인

스코프 체인 == 스코프는 함수의 중첩에 의해 계층적 구조를 갖는다.

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

image

• 지역 : outer 함수 & innter 함수

• inner함수는 outer 함수의 중첩함수

• outer 함수가 만든 지역 스코프는 inner 함수가 만든 지역 스코프의 상위스코프이고

• outer 함수의 지역 스코프의 상위스코프는 전역 스코프다.

@외부 함수(outer function): 중첩 함수를 포함하는 함수

@중첩 함수(nested function): 함수 몸체 내부에서 함수가 정의된 것

스코프 체인에 의한 변수 검색

상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다.

var x = "global x";
var y = "global y";

function outer() {
    var z = "outer's local z";

    function inner() {
        var x = "inner's local x";
        console.log(x); // (4) inner's local x
        console.log(y); // (5) global y
    }

    inner();
}

outer();

변수를 참조하는 스코프에서 검색 → 존재하지 않으면 상위스코프로 이동 후 검색

(4) x 변수를 참조하는 스코프인 inner 함수의 지역 스코프에서 x 변수 검색 → 존재 O : 검색된 변수 참조 후 종료

(5) y 변수를 참조하는 스코프인 inner 함수의 지역 스코프에서 y 변수 검색 → 존재 X → 상위 스코프인 outer 함수의 지역 스코프로 이동 → outer에도 존재 X → 상위 스코프인 전역 스코프로 이동 → 존재 O : 검색된 변수 참조 후 종료

스코프 체인에 의한 함수 검색

// 전역 함수
function foo() {
    console.log("global function foo");
}

function bar() {
    // 중첩 함수
    function foo() {
        console.log("local function foo");
    }

    foo(); // (1)
}

bar();

// 출력된 값 : local function foo

함수 선언문으로 함수를 정의하면, 런타임 이전에 함수 객체가 먼저 생성된다. 그리고 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 선언하고 생성된 함수 객체를 할당한다. [12장 함수 참고]

따라서, 위 코드에서 (1)에서 foo 함수를 호출하면

• 자바스크립트 엔진은 함수를 호출하기 위해 함수를 가리키는 식별자 foo를 검색한다.

✅13.4 함수 레벨 스코프

• 블록 레벨 스코프(block level scope)

  • 함수 몸체만이 아니라 모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프을 만든다.

• 함수 레벨 스코프(function level scope)

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

  • 따라서, 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다.

var x = 1; // 전역

if (true) {
    var x = 10; // 중복 선언
}

console.log(x); // 10

✅13.5 렉시컬 스코프

자바스크립트는 렉시컬 스코프를 따른다.

함수의 상위 스코프를 결정하는 방식

1. 함수를 어디서 호출했는 지에 따라 결정 → 동적 스코프(dynamic scope)

2. 함수를 어디서 정의했는 지에 따라 결정→ 정적 스코프(static scope) / 렉시컬 스코프(lexical scope)

자바스크립트는 렉시컬 스코프를 따른다.

• 따라서, 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다.

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

• 함수의 상위스코프는 함수 정의가 실행될 때 정적으로 결정된다.