본문 바로가기

Web/Frontend 기본 CS 정리

클로져(Closure)에 대해 설명해주세요.

728x90

답변

클로저란 함수가 생성될 때 외부 스코프(lexical scope)에 있는 변수들을 기억하고, 그 함수가 해당 스코프 밖에서 실행되더라도 그 변수들에 접근할 수 있게 하는 특성을 말합니다.

자바스크립트는 함수가 생성될 때 외부 스코프에 있는 변수들을 함께 저장하는데, 이를 통해 함수가 외부에서 호출되더라도 외부 변수에 접근할 수 있습니다.

 

클로저를 사용하는 상황 및 이유

데이터 은닉

외부에서 접근할 수 없는 변수로 만들어 클로저를 통해 보호합니다.

이를 통해 내부 함수만이 그 변수에 접근하고 변경할 수 있도록 합니다.

function outerFunction() {
    let count = 0;
    
    return function innerFunction() {
        count++;
        console.log(count);
    };
}

const counter = outerFunction();

counter(); // 1
counter(); // 2
counter(); // 3

변수를 내부 함수만을 가지고 변경시키기 때문에 데이터가 안전하게 보호되고 있음을 알 수 있습니다.

일관성 있는 변수 수정

function createCounter() {
    let count = 0; // 초기 상태
    
    return {
        increment: function() {
            count++; // 상태를 증가시킴
            console.log(count);
        },
        decrement: function() {
            count--; // 상태를 감소시킴
            console.log(count);
        },
        getCount: function() {
            return count; // 현재 상태를 반환
        }
    }
}

const counter = createCounter();

counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1
console.log(counter.getCount()); // 1

위의 코드처럼 변수에 접근하는 방식을 내부 함수로 정의하여 일관된 접근 방식을 제공할 수 있다.