JavaScript Scope의 이해와 활용 🌐

JavaScript에서 'Scope'란 변수가 존재하고 접근 가능한 범위를 의미합니다. 이 개념을 이해하는 것은 코드를 더 효율적이고 오류 없이 작성하는 데 중요합니다. 오늘은 JavaScript Scope의 기본과 그것을 어떻게 활용할 수 있는지 살펴보겠습니다.

전역 스코프(Global Scope)

전역 스코프에 선언된 변수는 어플리케이션 내 어디서든 접근할 수 있습니다. 이는 매우 유용할 수 있지만, 너무 많은 전역 변수는 코드를 관리하기 어렵게 만들 수 있습니다.

var globalVar = "저는 전역 변수입니다.";

function checkGlobalScope() {
    console.log(globalVar); // "저는 전역 변수입니다."
}

checkGlobalScope();

지역 스코프(Local Scope)

지역 스코프는 특정 함수 내부에서만 변수에 접근할 수 있게 합니다. 이를 통해 변수 이름 충돌을 방지하고 메모리 사용을 최적화할 수 있습니다.

function localScopeExample() {
    var localVar = "저는 지역 변수입니다.";
    console.log(localVar); // "저는 지역 변수입니다."
}

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

블록 스코프(Block Scope)

ES6에서는 let과 const를 사용하여 블록 스코프 변수를 선언할 수 있습니다. 이 변수들은 선언된 블록() 내에서만 접근 가능합니다.

function blockScopeExample() {
    if (true) {
        let blockVar = "저는 블록 스코프 변수입니다.";
        console.log(blockVar); // "저는 블록 스코프 변수입니다."
    }
    // console.log(blockVar); // ReferenceError: blockVar is not defined
}

blockScopeExample();

스코프 체인(Scope Chain)

함수 내부에서 변수를 찾을 때, JavaScript는 먼저 현재 스코프에서 찾습니다. 만약 없다면, 바깥 스코프로 이동하여 찾습니다. 이 과정은 최상위 스코프에 도달할 때까지 반복됩니다.

var outerVar = "저는 바깥 변수입니다.";

function outerFunction() {
    var innerVar = "저는 안쪽 변수입니다.";
    
    function innerFunction() {
        console.log(outerVar); // "저는 바깥 변수입니다."
        console.log(innerVar); // "저는 안쪽 변수입니다."
    }
    
    innerFunction();
}

outerFunction();

결론

JavaScript의 스코프를 이해하고 활용하는 것은 코드를 더 안전하고 효율적으로 만듭니다. 전역 스코프를 가능한 한 피하고, 지역 스코프와 블록 스코프를 적절히 사용하여 변수 충돌을 방지하고 메모리 사용을 최적화하세요. Happy coding! 🚀