[JS] Closure(클로저)란?

 

Closure란?

💡 함수가 종료된 이후에도 그 함수 내부의 지역 변수를 기억하고 접근할 수 있도록 하는 개념

• ‘함수’를 지칭하고, 또 ‘그 함수가 선언된 환경과의 관계’의 개념
• 자신이 선언될 당시의 환경을 기억하는 함수
• 내부 함수가 외부 함수의 context에 접근할 수 있는 것

Closure = 폐쇄 ⇒ 스코프를 이용하여 변수의 접근 범위를 ‘폐쇄’하는 것

• 외부 함수 스코프에서 내부 함수 스코프로 접근 불가능
• 내부 함수에서는 외부 함수 스코프에서 선언된 변수에 접근 가능

 

Closure 코드 예시

function closureFunction() {
	let a = 10; // 지역 변수
	return function innerFunction() {
		console.log(a);
	}
}
const myFunc = closureFunction();
myFunc(); // 10

/* ✅ closureFunction이 실행된 후에도 a가 사라지지 않음
	이는 클로저 덕분! innerFunction이 a를 기억하고 있어 계속 접근 가능 */

• 클로저는 렉시컬 환경(Lexical Environment) 을 기억하기 때문에 가능
  • 렉시컬 환경: 어떤 변수를 어디에서 참조할 수 있는지 결정하는 규칙
• innerFunction()이 선언될 때, 자바스크립트는 closureFunction()의 지역 변수들을 참초할 수 있도록 내부적으로 저장해둠
• 따라서 closureFunction()이 끝난 후에도 a가 메모리에서 지워지지 않고 유지됨.

 

Closure의 장점

1. 전역 변수 사용의 최소화

2. 데이터 보존 가능

• 클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있음
• 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 하는 폐쇄성을 갖음

function counter() {
    let count = 0; // 상태 유지됨

    return function () {
        count++;
        console.log(count);
    };
}

const increment = counter();
increment(); // 1
increment(); // 2
increment(); // 3

 

3. 모듈화를 통한 코드 재사용에 편리

• 클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존 가능
• 클로저를 통해 데이터와 메소드를 묶어 다닐 수 있기에 클로저는 **모듈화**에 유리

4. 정보의 접근 제한(캡슐화)

• 클로저 모듈 패턴을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만들어 정보의 접근을 제한할 수 있는데, 이를 캡슐화라고 함

function createSecret(secret) {
    return {
        getSecret: function() {
            return secret;
        }
    };
}

const mySecret = createSecret("비밀!");
console.log(mySecret.getSecret()); // 비밀!
console.log(mySecret.secret); // undefined (외부에서 직접 접근 불가능)

 

 

렉시컬 환경(Lexical Environment)이란?

• 변수와 함수의 유효 범위를 정의하는 내부 구조
• 각 실행 컨텍스트마다 생성됨
• 함수 내부에서 변수를 찾을 때 현재 환경 → 부모 환경 → 전역 환경 순으로 찾음

let globalVar = "전역 변수";

function outer() {
    let outerVar = "외부 변수";

    function inner() {
        let innerVar = "내부 변수";
        console.log(globalVar); // 전역 변수 (window의 렉시컬 환경)
        console.log(outerVar); // 외부 변수 (outer()의 렉시컬 환경)
        console.log(innerVar); // 내부 변수 (inner()의 렉시컬 환경)
    }

    inner();
}

outer();

 

 

 

---

 

( •̀ω•́ )و✧ 한 줄 컷 !

그래서 면접관이 "클로저는 무엇이며, 왜 사용되나요?" 라고 묻는다면?!

 

클로저는 함수가 선언될 당시의 렉시컬 환경을 기억하고, 함수가 종료된 이후에도 그 환경에 접근할 수 있도록 하는 함수입니다.

클로저는 상태를 안전하게 변경하고 이를 유지하기 위해 사용됩니다.
(데이터 유지, 캡슐화)

 

 

라고 답할 수 있다 ^**^ 끝!