JavaScript Scope의 이해와 활용 🌐

JavaScript에서 "Scope"는 변수나 함수가 접근 가능한 범위를 의미합니다. 이 개념을 이해하는 것은 코드를 더욱 효과적으로 작성하고, 버그를 방지하는 데 필수적입니다. 오늘은 JavaScript Scope의 기본을 쉽게 풀어서 설명하고, 어떻게 활용할 수 있는지 알아보겠습니다.

전역 Scope와 지역 Scope

JavaScript에는 크게 두 가지 타입의 Scope가 있습니다: 전역(Global) Scope와 지역(Local) Scope.

• 전역 Scope: 코드의 어느 곳에서든 접근 가능한 변수나 함수를 말합니다. 전역 변수는 웹 페이지의 생명주기 동안 계속 존재합니다.

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

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

checkScope();

• 지역 Scope: 특정 함수 내부에서만 접근 가능한 변수나 함수를 말합니다. 함수가 실행을 마치면, 해당 지역 Scope에 있는 변수는 사라집니다.

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

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

Block Scope

ES6에서 let과 const를 사용하면, 블록 단위로 변수를 선언할 수 있습니다. 이를 블록 Scope라고 합니다. 블록은 {}로 둘러싸인 코드의 영역을 말합니다.

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

checkBlockScope();

Scope Chain

함수 내부에서 변수를 찾을 때, JavaScript는 먼저 해당 함수의 지역 Scope에서 찾습니다. 만약 없다면, 바깥 Scope로 이동하여 찾습니다. 이러한 과정을 Scope Chain이라고 합니다.

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

function outerFunction() {
    var outerVar = "바깥 함수의 변수입니다";

    function innerFunction() {
        var innerVar = "안쪽 함수의 변수입니다";
        console.log(innerVar); // "안쪽 함수의 변수입니다"
        console.log(outerVar); // "바깥 함수의 변수입니다"
        console.log(globalVar); // "전역 변수입니다"
    }

    innerFunction();
}

outerFunction();

결론

Scope는 JavaScript에서 매우 중요한 개념입니다. 코드를 작성할 때 변수와 함수의 접근성을 제어하는 데 도움이 됩니다. 전역 Scope는 가능한 한 피하고, 필요한 곳에서만 지역 Scope를 사용하여 코드의 안정성과 유지보수성을 높이세요. 이제 JavaScript의 Scope에 대한 기본적인 이해를 바탕으로 더 효율적인 코드를 작성해보세요!