JavaScript 클로저

송연지·2024년 4월 17일
0

클로저(Closure)는 JavaScript의 강력한 기능 중 하나로, 함수가 선언될 때의 환경을 기억하여 그 환경 외부에서 호출되어도 해당 환경에 접근할 수 있게 하는 기능입니다. 클로저는 자바스크립트의 스코프와 실행 컨텍스트에 대한 이해를 필요로 합니다.

클로저는 다음과 같은 상황에서 유용합니다:

  • 상태를 안전하게 은닉하고, 특정 함수에게만 상태 변경을 허용할 때
  • 콜백 함수나 함수를 반환할 때 상태를 유지해야 할 때

JavaScript 클로저(Closure)

클로저는 함수와 그 함수가 선언될 때의 렉시컬 환경의 조합입니다. 이 렉시컬 환경은 클로저가 생성될 때 그 함수에 의해 참조되는 모든 지역 변수를 포함합니다.

예를 들어, 내부 함수가 외부 함수의 변수를 참조하고 있다면, 외부 함수가 실행을 마치고 반환된 후에도 해당 변수는 사라지지 않고 계속 유지됩니다.
이렇게 내부 함수가 외부 함수의 변수를 "기억"하는 현상이 바로 클로저입니다.

클로저는 다음과 같은 특성을 가집니다.

클로저의 특성

  1. 데이터 은닉과 캡슐화: 클로저를 사용하면 특정 데이터를 외부로부터 숨기고 함수를 통해서만 접근하도록 제한할 수 있습니다.
  2. 상태 보존: 클로저는 데이터를 보존하고 이를 통해 동작하는 함수를 반환함으로써, 다른 시점에서도 그 상태를 조회하거나 수정할 수 있습니다.
  3. 환경 유지: 클로저는 함수가 생성된 환경을 "기억"합니다. 따라서 함수가 그 환경 밖에서 호출되어도 해당 환경에 접근할 수 있습니다.

클로저 예시

예시 1: 카운터 함수

클로저를 사용해서 각기 독립적인 카운터를 생성하는 함수입니다.

function createCounter() {
    let count = 0;
    return function() {
        return ++count;
    };
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 1
console.log(counter2()); // 2
console.log(counter1()); // 3

이 예시에서 createCounter 함수는 클로저를 반환합니다. 각 counter는 자신만의 count 변수의 참조를 가지고 있으므로, 다른 카운터의 count에 영향을 주지 않습니다.

예시 2: 설정 정보 저장

클로저를 사용하여 특정 함수에 설정 정보를 저장하는 예시입니다.

function createGreeting(greeting) {
    return function(name) {
        console.log(greeting + ', ' + name + '!');
    };
}

const greetHello = createGreeting('Hello');
const greetHey = createGreeting('Hey');

greetHello('Alice'); // Hello, Alice!
greetHey('Bob'); // Hey, Bob!

createGreeting 함수는 인사말을 인자로 받고, 이 인사말을 사용하는 클로저를 반환합니다. 각 클로저는 다른 인사말을 "기억"합니다.

클로저 사용 시 주의사항

클로저는 메모리를 소비하므로 사용하지 않는 클로저는 적절히 해제해야 합니다.
클로저를 과도하게 사용하면 코드의 복잡도가 증가할 수 있습니다.
클로저는 JavaScript를 효과적으로 사용하기 위한 중요한 개념입니다. 클로저를 이해하고 적절히 활용하면, 프로그램의 안전성과 유연성을 크게 향상시킬 수 있습니다.

profile
프론트엔드 개발쟈!!

0개의 댓글