[JavaScript] Scope스코프와 Closer클로저

JavaScript에서 스코프와 클로저는 매우 중요한 개념입니다. 스코프는 변수와 함수가 어디서 어디까지 접근 가능한지를 정의하는 범위입니다. 클로저는 함수가 정의될 때의 렉시컬 환경을 기억하여, 함수가 스코프 밖에서 호출되어도 해당 환경에 접근할 수 있게 하는 기능입니다.

스코프 (Scope)

JavaScript의 주요 스코프 유형은 다음과 같습니다:

1. 전역 스코프 (Global Scope): 코드의 모든 부분에서 접근 가능한 변수나 함수.
2. 함수 스코프 (Function Scope): 함수 내부에서 선언된 변수나 함수는 함수 외부에서 접근할 수 없습니다.
3. 블록 스코프 (Block Scope): let과 const로 선언된 변수는 그들이 선언된 블록(일반적으로 {} 내부) 내에서만 접근 가능합니다.

var x = 10; // 전역 변수

function myFunction() {
    var y = 20; // 함수 스코프 변수
    console.log(x); // 전역 변수 x는 함수 내에서 접근 가능
    console.log(y); // 지역 변수 y는 함수 내에서 접근 가능
}

myFunction();
console.log(x); // 전역 변수 x는 여전히 접근 가능
// console.log(y); // 오류: y는 myFunction의 지역 변수로서 함수 외부에서는 접근 불가능

 

클로저 (Closure)

클로저는 함수가 생성될 때 그 함수가 선언된 렉시컬 환경을 “기억”하는 특성을 말합니다. 이는 함수가 스코프 외부에서 실행될 때도 그 환경에 있는 변수에 접근할 수 있게 합니다.

function makeCounter() {
    var count = 0; // `count`는 `makeCounter` 함수의 지역 변수

    return function() {
        return count++; // 내부 함수가 외부 함수의 변수 `count`를 참조
    };
}

var counter = makeCounter(); // `counter`는 이제 클로저
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

// 각각의 `counter` 인스턴스는 독립적인 `count` 변수의 참조를 가집니다.
var anotherCounter = makeCounter();
console.log(anotherCounter()); // 0
console.log(anotherCounter()); // 1

이 클로저 예시에서, makeCounter 함수는 내부 함수를 반환하고, 이 내부 함수는 부모 함수의 count 변수를 참조합니다. 이 내부 함수는 makeCounter 함수의 스코프 밖에서 호출되더라도, count 변수에 대한 참조를 유지합니다. 이것이 클로저의 핵심적인 특성입니다.

클로저의 사용 사례

클로저는 데이터 캡슐화, 이벤트 핸들러, 콜백 함수, 모듈 패턴 등 다양한 상황에서 유용하게 사용됩니다. 예를 들어, 개인 정보를 외부로부터 보호하면서 접근을 제어하려는 경우 클로저를 활용할 수 있습니다.

이러한 스코프와 클로저의 개념은 JavaScript를 깊이 이해하고 효과적으로 사용하는 데 있어 필수적입니다.