JavaScript에서의 변수 스코프와 클로저 이해하기

JavaScript는 웹 개발에서 가장 중요한 언어 중 하나입니다. 오늘은 JavaScript의 두 가지 핵심 개념인 변수 스코프와 클로저에 대해 알아보겠습니다. 이 개념들을 이해하면 코드를 더 효율적으로 작성하고 버그를 줄일 수 있습니다.

변수 스코프란?

변수 스코프는 변수가 접근 가능한 범위를 의미합니다. JavaScript에는 크게 두 가지 유형의 스코프가 있습니다: 전역 스코프와 지역 스코프.

• 전역 스코프: 변수가 함수 바깥에서 선언되면 어디서든 접근할 수 있는 전역 스코프를 가집니다.
• 지역 스코프: 함수 내부에서 변수를 선언하면 그 함수 내부에서만 접근할 수 있는 지역 스코프를 가집니다.

예제

var globalVar = "전역 변수";

function checkScope() {
    var localVar = "지역 변수";
    console.log(globalVar); // 전역 변수
    console.log(localVar); // 지역 변수
}

checkScope();
console.log(globalVar); // 전역 변수
// console.log(localVar); // Uncaught ReferenceError: localVar is not defined

위 예제에서 globalVar는 전역 변수로 어디서든 접근할 수 있지만, localVar는 checkScope 함수 내부에서만 접근할 수 있습니다.

클로저란?

클로저는 함수와 그 함수가 선언된 어휘적 환경의 조합입니다. 간단히 말해, 클로저는 내부 함수가 외부 함수의 스코프에 접근할 수 있게 해주는 기능입니다.

예제

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

    function innerFunction() {
        console.log(outerVar); // 외부 변수
    }

    return innerFunction;
}

var myClosure = outerFunction();
myClosure(); // 외부 변수

outerFunction의 내부 함수인 innerFunction은 outerFunction의 스코프에 있는 outerVar에 접근할 수 있습니다. outerFunction이 실행되어 종료된 후에도 innerFunction은 outerVar에 접근할 수 있는데, 이것이 클로저의 핵심입니다.

정리

변수 스코프와 클로저는 JavaScript에서 코드를 더 효율적으로 관리하고, 예측 가능하게 만드는 데 도움을 줍니다. 이러한 개념들을 이해하고 활용하면 더 나은 코드를 작성할 수 있습니다.