[JS Deep Dive] 13장 - 스코프

 

 

1. 스코프란 ?

• 모든 식별자 는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정
• 즉 다시 말해서 스코프는 식별자가 유효한 범위
• 만약 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프록르램 전체에서 하나밖에 사용 못했을 것이다. 
• 따라서... 스코프는 스코프 내에서 식별자는 유일해야하지만 다른 스코프에는 같은 이름의 식별자를 사용할 수 있다. 

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

 

 

이미지 출처 : https://east-star.tistory.com/m/13

 

2. 스코프 체인

• 스코프가 함수의 중첩에 의해 계층적 구조를 가진다. 
• 모든 스코프는 하나의 계층적 구조로 연결되며 모든 지역 스코프의 최상위 스코프는 전역 스코프
• 스코프 체인 : 모든 스코프가 계층적으로 연결된 것 
• 변수를 참조할 때 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 
• 스코프 체인도 상속과 비슷하게 자식의 자산을 부모가 사용할 수 없다. 

 

 

3. 함수 레벨 스코프

변수가 함수 내에서 선언될 때 그 함수 전체에서 접근 가능하고, 함수 외부에서는 접근할 수 없는 변수를 의미.

즉, 변수의 유효 범위가 함수 단위로 결정된다는 것을 말함

 

함수 레벨 스코프는 var 키워드로 선언된 변수는 함수 내 어디에서 선언되든 간에 함수 전체에서 접근 가능하다는 말이다.

이는 변수가 선언된 위치와 상관없이 함수의 시작 지점부터 유효하다는 의미

 

* 블록 레벨 스코프는 let과 const로 선언된 변수는 블록 레벨 스코프(Block-Level Scope)를 가진다,

이는 변수가 선언된 블록({}) 내부에서만 유효하다는 것을 의미한다.

즉 var로 선언된 변수는 함수 레벨 스코프를 가지므로, 함수 전체에서 유효하다 ! 

 

 

 

function example() {
    if (true) {
        var x = 10;  // `var`로 선언된 변수는 함수 레벨 스코프를 가짐
    }
    console.log(x);  // 10, `x`는 함수 내 어디서든 접근 가능
}

example();

 

 

블록 레벨 스코프는 ? 

function example() {
    if (true) {
        let y = 20;  // `let`으로 선언된 변수는 블록 레벨 스코프를 가짐
    }
    console.log(y);  // ReferenceError: y is not defined, `y`는 블록 외부에서 접근 불가
}

example();

 

 

4. 렉시컬 스코프

자바스크립트에서 변수가 선언된 위치에 따라 그 변수가 어디에서 유효한지를 결정하는 스코프 규칙을 의미

코드가 작성된 구조(문법적 구조)에 따라 스코프가 결정되며, 함수가 어디서 호출되었는지와는 무관하다.

function outer() {
    const x = 10;

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

    return inner;
}

const closure = outer();
closure();  // 10

 

 inner 함수는 outer 함수 내부에서 정의되었음.

outer 함수가 종료된 후에도 inner 함수는 여전히 x에 접근할 수 있다.

이는 inner 함수가 정의될 때의 렉시컬 스코프를 기억하고 있기 때문