스코프(Scope)에 대해 알아보자

Posted May 19, 2024

By Jinwoo 8 min read

안녕하세요. 오늘은 알고만 있지 자세한 내용은 모르는 스코프(Scope)에 대해 정리하려고 합니다. 항상 제대로 모르는 것들을 그냥 넘겨왔는데 이번 기회에 제대로 알아가보고자 합니다.

스코프(Scope)

스코프(Scope)란 무엇인가?

스코프(scope)는 프로그래밍에서 변수가 정의되고 접근할 수 있는 유효 범위를 의미합니다. 변수의 스코프를 이해하면 코드의 가독성을 높이고, 버그를 줄이며, 메모리 관리를 효율적으로 할 수 있습니다. 스코프는 일반적으로 두 가지 주요 유형으로 나뉩니다: 전역 스코프(Global Scope)와 지역 스코프(Local Scope). 자바스크립트를 예로 들어 스코프의 다양한 유형과 작동 방식을 설명하겠습니다.

스코프의 주요 유형

전역 스코프(Global Scope):

전역 스코프에 선언된 변수는 코드 어디서나 접근할 수 있습니다.
var, let, const를 사용하여 전역 스코프에 변수를 선언할 수 있지만, var로 선언된 변수는 함수 스코프를 따르고, let과 const는 블록 스코프를 따릅니다.

  
 var globalVar = 'I am global';
 let globalLet = 'I am also global';
 const globalConst = 'I am global too';

 function showGlobals() {
     console.log(globalVar);   // 'I am global'
     console.log(globalLet);   // 'I am also global'
     console.log(globalConst); // 'I am global too'
 }

 showGlobals();

지역 스코프(Local Scope):

지역 스코프에 선언된 변수는 해당 스코프 내부에서만 접근할 수 있습니다. 일반적으로 함수나 블록 내부에 선언된 변수가 지역 스코프를 가집니다.

  
 function localScopeExample() {
     var localVar = 'I am local';
     console.log(localVar); // 'I am local'
 }

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

스코프의 종류

함수 스코프(Function Scope):

함수 내에서 선언된 변수는 함수 내부에서만 유효합니다. var 키워드를 사용하여 선언된 변수는 함수 스코프를 따릅니다.

  
 function functionScopeExample() {
     var functionScopedVar = 'I am function scoped';
     console.log(functionScopedVar); // 'I am function scoped'
 }

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

블록 스코프(Block Scope):

블록({}) 내에서 선언된 변수는 블록 내부에서만 유효합니다. let과 const 키워드를 사용하여 선언된 변수는 블록 스코프를 따릅니다.

  
 if (true) {
     let blockScopedVar = 'I am block scoped';
     const blockScopedConst = 'I am also block scoped';
     console.log(blockScopedVar);   // 'I am block scoped'
     console.log(blockScopedConst); // 'I am also block scoped'
 }

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

스코프 체인(Scope Chain)

스코프 체인은 변수나 함수가 정의된 스코프에서 시작하여 상위 스코프를 순차적으로 탐색하는 과정을 의미합니다. 자바스크립트는 변수를 찾기 위해 현재 스코프에서 시작하여 전역 스코프까지 차례대로 검색합니다. 이는 변수의 접근 권한을 결정하는 데 중요한 역할을 합니다.

  
let globalVar = 'I am global';

function outerFunction() {
    let outerVar = 'I am outer';

    function innerFunction() {
        let innerVar = 'I am inner';
        console.log(globalVar); // 'I am global' (전역 스코프에서 찾음)
        console.log(outerVar);  // 'I am outer'  (외부 함수 스코프에서 찾음)
        console.log(innerVar);  // 'I am inner'  (내부 함수 스코프에서 찾음)
    }

    innerFunction();
}

outerFunction();

렉시컬 스코프(Lexical Scope)

자바스크립트는 렉시컬 스코프(정적 스코프)를 사용합니다. 이는 함수가 정의된 위치에 따라 스코프가 결정된다는 의미입니다. 함수가 호출될 때가 아니라 정의될 때의 스코프 체인을 따릅니다.

  
let outerVar = 'I am outer';

function outerFunction() {
    let innerVar = 'I am inner';

    function innerFunction() {
        console.log(outerVar); // 'I am outer'
        console.log(innerVar); // 'I am inner'
    }

    return innerFunction;
}

const innerFunc = outerFunction();
innerFunc(); // 렉시컬 스코프에 따라 outerVar와 innerVar에 접근 가능

클로저(Closure)

클로저는 함수와 함수가 선언된 렉시컬 환경의 조합입니다. 클로저는 함수가 외부 함수의 변수에 접근할 수 있게 합니다. 클로저는 스코프를 활용하여 데이터 은닉 및 상태 유지를 가능하게 합니다.

  
function outerFunction() {
    let count = 0;

    return function innerFunction() {
        count++;
        console.log(count);
    };
}

const counter = outerFunction();
counter(); // 1
counter(); // 2
counter(); // 3

스코프의 활용

변수 은닉: 중요한 데이터를 외부에서 접근할 수 없도록 숨길 수 있습니다.
모듈 패턴: 클로저와 스코프를 이용하여 모듈을 만들고 데이터를 은닉할 수 있습니다.
메모리 관리: 불필요한 변수를 전역 스코프에 선언하지 않음으로써 메모리 누수를 방지할 수 있습니다.

결론

스코프는 변수가 어디에서 정의되고 접근할 수 있는지를 결정하는 중요한 개념입니다. 전역 스코프, 지역 스코프, 함수 스코프, 블록 스코프 등 다양한 스코프 유형을 이해하면 더 나은 코드 구조와 효율적인 메모리 관리를 할 수 있습니다. 스코프 체인과 렉시컬 스코프의 원리를 이해하면 복잡한 코드에서도 변수의 유효 범위를 정확히 파악할 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 높이고, 예기치 않은 버그를 방지할 수 있습니다.

오늘도 필자의 부족한 글 읽어 주셔서 감사합니다.

coding

스코프 Scope

This post is licensed under CC BY 4.0 by the author.