스코프

AI
qwen-3-235b-a22b-instruct-2507
작성자
익명
작성일
2025.09.02
조회수
4
버전
v1
기술 → 프로그래밍 → JavaScript
스코프 자바스크립트 렉시컬 스코프 블록 스코프 클로저

스코프

스코프(Scope)는 프로그래밍 언어에서 변수나 함수와 같은 식별자(Identifier)가 어디서 사용될 수 있는지를 결정하는 규칙을 의미합니다. JavaScript에서는 스코프가 코드의 실행 흐름과 변수 접근 가능성을 크게 좌우하며, 잘못 이해하면 예기치 않은 동작이나 버그를 유발할 수 있습니다. 이 문서에서는 JavaScript에서의 스코프 개념, 종류, 작동 방식, 그리고 관련된 중요한 개념들을 자세히 설명합니다.

개요

JavaScript에서 스코프는 변수나 함수가 정의된 위치에 따라 그 변수나 함수가 어디서 참조될 수 있는지를 제어하는 메커니즘입니다. 스코프는 코드의 안정성과 유지보수성을 높이는 데 중요한 역할을 하며, 전역 변수의 남용을 방지하고 이름 충돌을 최소화하는 데 기여합니다.

JavaScript는 렉시컬 스코프(Lexical Scope)를 기반으로 하며, 이는 변수의 스코프가 코드가 작성된 구조(소스 코드 상의 위치)에 따라 결정된다는 것을 의미합니다. 런타임이 아닌 정적 분석을 통해 스코프가 결정됩니다.

스코프의 종류

JavaScript에서는 주로 다음 세 가지 스코프가 존재합니다.

1. 전역 스코프 (Global Scope)

전역 스코프는 스크립트 전체에서 접근 가능한 영역입니다. 전역 스코프에 선언된 변수나 함수는 어디서든 참조할 수 있습니다.

var globalVar = "전역 변수";

function globalFunction() {
    console.log(globalVar); // 접근 가능
}

  • 주의사항: 전역 변수는 모든 코드에서 접근 가능하기 때문에 이름 충돌이나 의도치 않은 수정이 발생할 수 있어, 지나친 사용은 피해야 합니다.

2. 함수 스코프 (Function Scope)

함수 내부에서 [var](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/var) 키워드로 선언된 변수는 해당 함수 내에서만 접근 가능하며, 이를 함수 스코프라고 합니다.

function myFunction() {
    var functionVar = "함수 스코프 변수";
    console.log(functionVar); // 정상 출력
}

console.log(functionVar); // ReferenceError: functionVar is not defined

  • var는 함수 단위 스코프를 가지며, 블록({}) 내부에서 선언해도 블록 외부에서 접근 가능할 수 있습니다 (호이스팅과 관련).

3. 블록 스코프 (Block Scope)

ES6(ECMAScript 2015)부터 도입된 [let](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/let)과 [const](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/const)는 블록 스코프를 따릅니다. 블록(예: if, for, {}) 내에서 선언된 변수는 그 블록 내부에서만 유효합니다.

if (true) {
    let blockVar = "블록 스코프 변수";
    const blockConst = "상수 블록 변수";
    console.log(blockVar); // 정상 출력
}

console.log(blockVar);   // ReferenceError
console.log(blockConst); // ReferenceError

  • let과 const는 var와 달리 블록 단위로 스코프가 제한되며, 호이스팅이 있지만 TDZ(Temporal Dead Zone)로 인해 초기화 전에 접근할 수 없습니다.

스코프 체인 (Scope Chain)

JavaScript는 변수를 찾을 때 현재 스코프에서 시작하여 외부 스코프로 점차 확장하며 탐색합니다. 이 과정을 스코프 체인(Scope Chain)이라고 합니다.

var globalVar = "전역";

function outer() {
    var outerVar = "외부 함수";

    function inner() {
        var innerVar = "내부 함수";
        console.log(globalVar); // 전역 스코프에서 찾음
        console.log(outerVar);  // 외부 함수 스코프에서 찾음
        console.log(innerVar);  // 현재 스코프
    }

    inner();
}

outer();

  • 스코프 체인은 중첩된 함수에서 외부 변수에 접근할 수 있게 해줍니다.
  • 변수 이름이 중복될 경우, 더 내부 스코프의 변수가 우선시됩니다 (가장 가까운 스코프에서 검색).

호이스팅 (Hoisting)과 스코프

JavaScript는 변수 및 함수 선언을 해당 스코프의 최상단으로 끌어올리는 호이스팅을 수행합니다. 그러나 초기화는 그 자리에 남아 있습니다.

console.log(hoistedVar); // undefined (선언은 호이스팅됨)
var hoistedVar = "호이스팅 예시";

console.log(hoistedLet); // ReferenceError (TDZ)
let hoistedLet = "let은 호이스팅되지만 접근 불가";

  • var: 선언만 호이스팅되고, 값은 undefined.
  • let, const: 호이스팅되지만 초기화 전에는 접근 불가 (TDZ).

클로저 (Closure)와 스코프

클로저는 내부 함수가 외부 함수의 변수를 참조할 수 있는 JavaScript의 특성입니다. 이는 스코프 체인의 자연스러운 결과입니다.

function outer() {
    var outerVar = "외부 변수";

    return function inner() {
        console.log(outerVar); // 클로저로 외부 변수 접근
    };
}

const closureFunc = outer();
closureFunc(); // "외부 변수" 출력

  • 클로저는 외부 함수가 종료된 후에도 외부 변수를 유지할 수 있어, 데이터 캡슐화, 모듈 패턴 등에 유용하게 사용됩니다.

관련 개념 및 팁

  • IIFE(Immediately Invoked Function Expression): 함수 스코프를 이용해 즉시 실행되는 함수로, 전역 스코프 오염을 방지합니다.
  • 모듈 패턴: 클로저와 함수 스코프를 활용해 private 변수와 public 메서드를 구현합니다.
  • strict mode: use strict를 사용하면 스코프 관련 오류를 더 엄격하게 검사합니다.

참고 자료

스코프는 JavaScript의 핵심 개념 중 하나로, 이를 정확히 이해하면 더 안정적이고 예측 가능한 코드를 작성할 수 있습니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(qwen-3-235b-a22b-instruct-2507)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

이 AI 생성 콘텐츠가 도움이 되었나요?