JS 스코프 개념

스코프(Scope)란?

자바스크립트에서 스코프(Scope)는 코드에서 변수나 함수가 어디에서 유효하고 접근 가능한지를 결정하는 규칙이다.

스코프는 코드 작성 시 변수의 가시성(Visibility)과 생명주기(Lifetime)를 결정하기 때문에 스코프를 명확히 이해하는 것이 자바스크립트 프로그래밍에서 필수적이다.

자바스크립트에서 스코프는 크게 두 가지로 나눈다. 전역 스코프(Global Scope)와 지역 스코프(Local Scope) 그리고 더 구체적으로,함수 스코프와 블록 스코프라는 개념이 지역 스코프의 하위 유형이다. 또한, 자바스크립트는 렉시컬 스코프(Lexical Scope)라는 규칙을 따르는데 이 규칙은 함수나 변수가 어디에서 정의되었는지에 따라 접근 권한이 결정된다는 것을 의미한다. 렉시컬 스코프는 함수 호출과 무관하게 코드 작성 시점에 스코프가 고정되는 특성을 가진다.

 

전역 스코프 (Global Scope)

전역 스코프는 프로그램 내에서 어디서든 접근 가능한 스코프를 말한다. 전역 스코프에 선언된 변수는 전역 변수로 코드 어디에서나 접근할 수 있다. 전역 변수는 웹 브라우저 환경에서는 window 객체, Node.js 환경에서는 global 객체에 속한다.

특징

• 전역 스코프에 선언된 변수는 모든 함수나 블록에서 접근할 수 있다.
• 코드의 어디서든 참조될 수 있기 때문에 의도하지 않게 덮어쓰거나 충돌이 발생할 가능성이 있다.

전역 스코프 예시

let globalVar = 'global variable';

function logGlobalVar() {
    console.log(globalVar);  // 전역 변수에 접근 가능
}

logGlobalVar();  // 'global variable' 출력
console.log(globalVar);  // 'global variable' 출력

 

지역 스코프 (Local Scope)

지역 스코프는 특정 함수 내부 또는 블록 내부에서만 유효한 스코프를 의미한다.

지역 스코프에 선언된 변수는 해당 함수나 블록이 실행될 때만 유효하며 그 밖의 코드에서는 접근할 수 없다.

함수 스코프 (Function Scope)

자바스크립트에서 함수 내부에서 선언된 변수는 함수 스코프를 가진다. 함수 내부에서 선언된 변수는 함수 내부에서만 유효하고 함수가 종료되면 사라진다.

함수 스코프 예시

function localScope() {
    let localVar = 'local variable';
    console.log(localVar);  // 함수 내부에서는 접근 가능
}

localScope();
console.log(localVar);  // localVar는 함수 외부에서 접근할 수 없음

 

블록 스코프 (Block Scope)

블록 스코프는 let과 const 키워드로 선언된 변수에 적용되며 중괄호 {}로 둘러싸인 블록 내에서만 유효하다. 이는 조건문, 반복문, 함수 블록 등에서 변수를 제한할 수 있는 유용한 기능을 제공한다.

블럭 스코프 예시

if (true) {
    let blockVar = 'block variable';
    console.log(blockVar);  // 블록 내부에서는 접근 가능
}

console.log(blockVar);  // blockVar는 블록 외부에서 접근 불가

 

var와의 차이점

var 키워드는 블록 스코프를 지원하지 않고 오로지 함수 스코프만 지원한다. var로 선언된 변수는 블록 내에서도 블록 외부에서 접근할 수 있다. 

if (true) {
    var functionScoped = 'function scoped';
}
console.log(functionScoped);  // 'function-scoped' 출력 (블록 외부에서도 접근 가능)

렉시컬 스코프 (Lexical Scope)

렉시컬 스코프(Lexical Scope)는 자바스크립트에서 스코프가 정의된 위치에 따라 변수를 결정하는 규칙이다.

자바스크립트는 렉시컬 스코프를 따르는 언어로 함수나 변수가 어디에서 호출되었는지가 아니라 어디에서 정의되었는지에 따라 스코프가 결정된다.

렉시컬 스코프의 예시

함수가 호출되는 시점이 아닌 정의된 위치에서의 스코프를 참조합니다. 즉 함수는 자신이 정의된 환경(외부 스코프)에 접근할 수 있다.

 

아래 예시에서 inner 함수는 자신의 스코프 내에서 outerVar 변수를 찾을 수 없기 때문에 상위 스코프인 outer 함수 밖에서 선언된 outerVar에 접근한다. 이는 렉시컬 스코프가 자바스크립트가 변수 참조 시 스코프 체인(Scope Chain)을 따라 상위 스코프를 검색하기 때문이다.

var outerVar = 'outside!';

function inner() {
    console.log(outerVar);  // 외부 스코프의 변수에 접근 , 'outside!' 출력
 }

function outer() {
    var outerVar = 'inside!';
    inner();
}

outer();

스코프 체인 (Scope Chain)

스코프 체인(Scope Chain)은 자바스크립트가 변수를 참조할 때 현재 스코프에서 변수를 찾고 해당 스코프에 변수가 없으면 상위 스코프로 올라가며 변수를 검색하는 방식이다. 체인은 최상위 스코프인 전역 스코프에 도달할 때까지 계속된다. 

스코프 체인 예시

let globalVar = 'global!';

function outer() {
    let outerVar = 'outer!';
    
    function inner() {
        let innerVar = 'inner!';
        console.log(innerVar);  // 'inner!'
        console.log(outerVar);  // 'outer!'
        console.log(globalVar); // 'global!'
    }
    
    inner();
}

outer();

 

참고문헌

스코프 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

구름EDU - 모두를 위한 맞춤형 IT교육