[JavaScript] 스코프(scope)란

개요

최근 자바스크립트의 실행 컨텍스트와 클로저를 공부하면서 더 기본이 되는 개념을 먼저 정리해야 할 필요성을 느꼈다. 실행 컨텍스트와 클로저는 자바스크립트의 동작 원리를 이해하는 데 중요한 개념이지만, 이 것들을 제대로 이해하기 위해서는 그 토대가 되는 스코프에 대한 이해가 선행되어야 함을 느꼈다. 이번 글에서는 스코프의 기본 개념을 정리하고, 이를 바탕으로 다음 글에서 실행 컨텍스트와 클로저로 확장해나갈 예정이다.

 

 

스코프란

스코프는 모든 프로그래밍 언어의 기본 개념 중 하나다. 특히 자바스크립트는 다른 언어와 구별되는 스코프 특징이 있어 이해가 더욱 중요하다. 아래에서 자세히 설명하겠지만, var와 let/const 키워드로 선언한 변수의 스코프가 서로 다르게 동작한다.

 

스코프는 식별자(변수명, 함수명, 클래스명 등)의 유효 범위를 말한다. 코드의 특정 부분에서 선언된 변수를 다른 부분에서 접근할 수 있는지를 결정하는 규칙이라고 볼 수 있다. 예를 들어 함수의 매개변수 같은 경우에는 함수 내부에서만 접근이 가능하다.

function add(x, y) {
    console.log(x, y); // 2, 5
    return x + y;
}

add(2, 5);

console.log(x, y); // ReferenceError: x is not defined

변수는 전역 영역, 함수 내부, 코드 블록 등 다양한 위치에서 선언할 수 있으며 이들은 서로 중첩될 수 있다. 변수가 선언된 위치에 따라 해당 변수를 참조할 수 있는 범위가 결정되는데, 이것이 바로 스코프의 기본 원리다.

 

다음 예시를 통해 스코프의 동작을 더 자세히 살펴보자.

var x = 'global';

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

foo();

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

이 코드에서는 전역 영역과 foo 함수 내부에 같은 이름의 변수 x를 선언했다. (1)과 (2) 지점에서 x를 참조할 때 자바스크립트 엔진은 어떤 x를 선택할지 결정해야 한다. 이런 과정을 식별자 결정$_{identifier \space resolution}$이라 한다.

자바스크립트 엔진은 위 코드처럼 같은 이름의 식별자가 존재할 때 스코프를 통해 어떤 식별자를 참조할지 판단한다. 즉 스코프는 식별자 검색을 위한 규칙으로도 볼 수 있다.

 

 

코드의 문맥과 환경

코드가 실행되는 위치와 그 주변 코드를 렉시컬 환경$_{lexical \space environment}$이라 한다. 이 렉시컬 환경으로 구성된 코드의 문맥${context}$을 실행 컨텍스트$_{execution \space context}$로 구현하며, 모든 코드는 이 실행 컨텍스트 안에서 평가되고 실행된다.

앞선 예제를 다시 보면, 전역에 선언된 x는 어디서든 참조할 수 있지만 foo 함수 내부의 x는 그 함수 안에서만 참조할 수 있다. 두 x는 이름이 같지만 스코프가 다른 별개의 변수다.

 

변수의 이름은 같지만 스코프가 달라 별개의 변수다.

 

스코프는 식별자 충돌을 방지하는 네임스페이스 역할을 한다. 우리가 평상시에 사용하는 컴퓨터의 폴더 시스템과 유사한데, 폴더가 다르면 같은 이름의 파일을 가질 수 있듯 다른 스코프에서는 같은 이름의 변수를 선언할 수 있다. 스코프가 없다면 모든 변수명이 전역에서 유일해야 하므로 프로그래밍이 매우 제한적일 것이다.

 

네임스페이스$_{namespace}$
네임스페이스는 프로그래밍에서 코드를 논리적 그룹으로 구성하는 방법이다. 특히 여러 라이브러리를 사용하는 대규모 프로젝트에서 이름 충돌을 방지하는 중요한 메커니즘으로 작용한다. 예를 들어 C++의 std 네임스페이스나 Python의 모듈 시스템은 이러한 개념을 잘 보여준다.

네임스페이스 내부의 모든 식별자(변수, 함수, 클래스 등의 이름)는 서로를 직접 참조할 수 있지만, 외부에서 접근할 때는 일반적으로 네임스페이스의 이름을 통한 접근이 필요하다. 이는 마치 우리가 폴더 안의 파일에 접근할 때 폴더 경로를 지정하는 것과 유사하다.

스코프는 이러한 네임스페이스의 가장 기본적인 형태다. 함수나 블록 레벨 스코프는 자신만의 네임스페이스를 형성해 외부와 구분되는 식별자 영역을 만든다. 이를 통해 프로그래머는 각 영역에서 독립적으로 이름을 지을 수 있고, 코드의 구조화와 모듈화가 가능해진다.

 

var과 let, const의 차이점

var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다. 의도치 않게 변수 값이 재할당되어 변경되는 부작용을 발생시킬 수 있다.

function counter() {
   var count = 0;
   var count = 10; // 중복 선언 허용
   console.log(count); // 10 
}
counter();

 

하지만 let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용하지 않는다.

function temperature() {
    let temp = 20;
    let temp = 25; // SyntaxError: Identifier 'temp' has already been declared
    console.log(temp);
}
temperature();

 

 

references

https://www.yes24.com/Product/Goods/92742567

https://learn.microsoft.com/ko-kr/cpp/cpp/namespaces-cpp?view=msvc-170