인프런 커뮤니티 질문&답변

안녕하세요! 팀오님! 질문 주셔서 감사합니다.

팀오님이 이해하신 내용이 맞습니다. 거기에 약간 살을 붙여 설명을 드리겠습니다. 자바스크립트의 글로벌 스코프는 하나이지만 이해를 돕기 위해 var 변수를 관리하는 글로벌 스코프가 있고 let 과 const 변수를 관리하는 글로벌 스코프가 있다고 말할 수 있습니다.

• var 변수를 관리하는 글로벌 스코프를 브라우저 환경에서는 window 객체가 관리하는 것입니다. 즉, window 객체의 속성이 됩니다.

• let 과 const 변수를 관리하는 글로벌 스코프는 ES6에 도입된 것으로 Script 스코프라고도 합니다. 즉, window 객체의 속성이 되지 않습니다.

그리고 ES6 의 모듈 스코프가 있습니다. (<script type="module" ..></script>) 로 만들수 있고 글로벌 스코프를 오염시키지 않는 모듈만의 독립 스코프가 만들어 집니다.

전역 스코프 (Global Scope)
├── var 변수 (전역 객체의 속성으로 등록)
│     └── window.variableName으로 접근 가능
├── let, const 변수 (전역 객체의 속성이 아님) => Script 스코프
│     └── window.variableName으로 접근 불가
└── 모듈 스코프 (Module Scope)
      └── 전역 스코프와 분리된 독립적인 스코프

그림으로 나타내면 아래와 같습니다.

자 이쯤에서 글로벌 스코프가 무엇일까요? 어떤 성격을 가지고 있는 것일까? 를 이해하는 것이 중요합니다.

글로벌 스코프에 선언한 변수는 블록이나 함수 블록에 동일한 이름의 변수가 없을 때, 어느 함수나 블럭에서 참조할 수 있다는 것을 의미합니다.

예제를 들면 아래와 같습니다.

// Global Scope (Window Object)
var globalVar = "I'm a global variable";

// Script Scope
let scriptLet = "I'm a script-scoped variable";
const scriptConst = "I'm a script-scoped constant";

function outerFunction() {
    // Outer Function Scope
    let outerVar = "I'm in the outer function";
    
    function innerFunction() {
        // Inner Function Scope
        let innerVar = "I'm in the inner function";
        
        {
            // Block Scope :: 여기
            let blockVar = "I'm block-scoped";
            const blockConst = "I'm a block-scoped constant";
            
            console.log(blockVar);  // 접근가능
            console.log(innerVar);  // 접근가능
            console.log(outerVar);  // 접근가능
            console.log(scriptLet);  // 접근가능
            console.log(globalVar);  // 접근가능
        }

        // 접근할 수 없습니다.
        // console.log(blockVar); 
    }
    
    innerFunction();
}

outerFunction();
console.log(globalVar);  
console.log(scriptLet);  

그렇다면 어떻게 Block Scope :: 여기 에서 globalVar 변수를 접근할 수 있는 것일까요?

바로 스코프 체인을 하기 때문입니다. 자바스크립트는 변수를 사용할 때, 해당 변수를 먼저 찾아서 참조해야 합니다.

그래야 변수의 값을 읽거나 변수에 값을 쓸 수 있기 때문입니다.

globarVar 는 어느 깊이에 있는 블럭(함수 블럭 포함)이더라도 자신을 포함하여 상위 블럭에 동일한 이름의 변수가 없는한 접근할 수 있습니다.

마치 우리가 누구나 아는 스타를 글로벌 스타라고 부르는 것처럼 globarVar 는 어느 블럭에서나 참조할 수 있죠.

그렇게 되는 이유는 스코프체인의 순서가 로컬 블럭 스코프부터 찾고 제일 나중에 글로벌 스코프를 찾기 때문입니다.

로컬 스코프를 찾아서 없으면 
 -> 상위 스코프에서 찾는다 
  -> 그래도 없으면 다시 상위 스코프에 가서 찾는다 
   -> ... 
    -> Script 스코프에서 찾는다 
     -> Window 객체가 관리하는 Global 스코프에서 찾는다.

위 순서에서 Script 스코프 또한 제일 끝부분에서 검색하기 때문에 일종의 글로벌 스코프가 되는 것입니다.

그림으로 그려보면 아래와 같습니다.

좀 더 자세한 내용은 아래 강좌를 보시면 도움이 될 것 같습니다.

• 스코프 체인과 참조 오류(Scope Chaining and Reference Error)

그리고 스코프 체인과 프로토타입 체인을 혼동하실 수 있어서 프로토타입 체인 영상도 같이 보시면 좋을 것 같습니다.

• 프로토타입 체인

   

답변이 팀오님에게 도움 드렸기를 바랍니다. 감사합니다 😊

안녕하세요, 인프런 AI 인턴입니다. 팀오님, 질문 주셔서 감사합니다.

브라우저 환경에서는 window 객체가 가장 최상위의 글로벌 객체이며, 일반적으로 Global 스코프라고 할 때 window 객체를 의미합니다. 그러나 let과 const로 변수를 선언하면 이들은 window 객체에 속하지 않습니다. 대신, ES6부터 도입된 개념으로 이러한 변수들은 Script 스코프라는 별도의 스코프에 놓이게 됩니다.

Script 스코프는 전역이라는 점에서는 맞지만 기존의 var 변수가 window의 속성으로 올라가던 방식과는 달리 let과 const는 window 객체의 속성이 아닙니다. 예를 들어, let a = 10;이라고 선언하면 window.a로 접근할 수 없습니다. 이는 let과 const 변수가 실제로는 window 객체와 독립된 스코프에 저장되기 때문입니다.

따라서, 브라우저 환경의 Global 스코프를 다시 나눌 수 있는 관점에서 접근해보면, 전역 코드처리에서 사용하는 Global 스코프와 ES6 이후에 생성된 Script 스코프라는 스코프가 존재한다고 이해하시면 됩니다.

• 자바스크립트에서 전역 객체와 전역 변수 구분하기: 이 강의에서는 자바스크립트에서의 스코프와 전역 객체에 대해 보다 깊게 다루고 있습니다.
  

이해를 돕기 위해 참고하실만한 강의 링크를 추가로 드렸습니다. 궁금한 점이 있으면 추가적으로 질문해 주세요. 😄

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.