JS 스코프와 스코프 체인

스코프 Scope

스코프는 식별자(변수, 함수, 클래스 이름) 접근 규칙에 따른 유효 범위입니다.

즉, 간단하게 변수를 참조할 수 있는 유효한 범위라고 생각하면 됩니다.

 

스코프는 블럭 { } 혹은 함수에 의해 나눠집니다. (블럭이라 하면, if(){}, for(){} ... 등도 포함합니다.)

 

아래 예시를 보면, 블럭 안에서는 블럭 밖에 있는 k 도 블럭 안에 있는 x 도 잘 출력됩니다.

그러나 블럭 밖에서 블럭 안에 있는 x 를 출력하려고 하면 에러가 발생합니다.

 

함수 밖에서 정의된 k 를 전역 변수, 전역 스코프 ( 전체에서 접근 유효)

함수 내에서 정의된 x 를 지역 변수, 지역 스코프 라고 합니다. (지역 내에서만 접근 유효)

 

밖(전역) 에서는 안(지역)의 변수를 참조할 수 없지만, 안(지역)에서 밖(전역)의 변수를 참조할 수 있습니다.

 

이게 아주 중요한 컨셉입니다!

다른 언어에서도 scope 개념은 동일하기에 여기서 잘 이해하고 넘어가야 합니다.

 

let k = 'happy world!';

function exampleFunction() {
    let x = "good morning!";
    console.log(x); // good morning! 출력됩니다.
    console.log(k); // happy world! 출력됩니다.
}

console.log(x); // 에러 발생

 

왜 이런 범위가 필요할까요? 크게 2가지 이유가 있습니다.

이름 충돌 방지와 메모리 절약을 위해 필요 합니다.

 

괄호를 통해 scope 를 나눴으니 같은 변수의 이름을 써도 에러가 안 납니다. 하지만, 사용할 때 명심해야 할 것이 있습니다.

 

let a = 10; // 📍
{
    let a = 1; // 📍📍
    {
        let b = 2;
        console.log(a); // 📝 1
    }
    console.log(a); // 📝📝 1
    console.log(b); // 에러 b is not defined
}

 

 

지역 스코프에서 변수를 참조할 때, 어떤 식으로 변수를 참조하는지 순서를 먼저 알아야 합니다.

 

예를 들어, ✏️ 줄에서 a 를 출력하려고 할 때, 지역 스코프는 전역 스코프를 참조 할 수 있으니 바로 전역 스코프로 가서 a 를 찾는 것이 아닙니다. ✏️ 줄은 가장 먼저 자신이 속한 스코프에서 a 를 찾습니다. 만약 자신이 속한 곳에서 a가 없다면, 바로 윗 스코프📍📍 로 갑니다. 즉, 자신을 포함하고 있는 스코프로 가는 것입니다. (이렇게 스코프끼리 연결되어 있는 것을 스코프 체인 이라고 합니다.)

 

이런 맥락에서 보면 ✏️✏️ 줄의 출력 값이 왜 10이 아니라 1인지 알 수 있습니다. 자신이 속한 스코프(블럭) 에서 a📍📍 를 찾았기 때문에 전역 스코프📍 까지 가서 값을 참조할 필요가 없습니다.

 

그리고 블럭이 끝나고 변수가 더 이상 필요 없게 되면 가비지 컬렉터 가 변수를 삭제합니다. 때문에 메모리 낭비를 방지할 수 있습니다.

 

가비지 컬렉터 (Garbage Collector)는 블럭에서 쓰임을 다한 변수를 삭제해주거나 객체를 참조하고 있는 변수가 없을 때, 그 객체는 필요 없다고 판단하여 삭제합니다.

 

스코프는 정말 중요한 개념인 만큼 정확하게 알고 있어야 합니다.

 

참고 자료

https://developer.mozilla.org/ko/docs/Glossary/Scope

스코프 - 용어 사전 | MDN