JS - 클로저 ( Closure )

클로저 ( Closure )
클로저는 함수와 함수가 선언된 어휘적 환경 ( Lexical Environment )의 조합
즉, 함수 안에 함수를 선언한 환경에서의 관계를 의미합니다.

해당 함수 안에 함수를 선언한 환경은 내부 함수에서 외부 함수로 지역 변수를
접근 할 수 있지만 외부 함수의 실행이 끝나고 외부 함수가 소멸한 이후에도
내부 함수가 외부 함수의 변수에 접근 할 수 있는 것을 의미합니다.

자바스크립트는 함수를 리턴하고 리턴되는 함수가 클로저를 형성하기 때문에 접근이 가능
클로저는 반환된 내부 함수가 자신이 선언되었을때의 환경( Lexical Environment )
에서의 스코프를 기억하기 때문에 접근이 가능.

 

const fnClosure = () => {
	const fnOuter = () => {
		let a = 100;
        
        let fnInner = () => {
			console.log(a); // 내부 함수에서 외부 함수로 지역 변수 접근
		}
        return fnInner;
	}
    
    const fnCall = fnOuter(); // 외부 함수 실행
    
    // 외부 함수의 실행이 끝난 뒤에도 변수에 접근이 가능하다.
    fnCall(); //100
}

 

 

1. 클로저를 사용하는 이유

1.1 정보의 접근 제한 ( 캡슐화 ) - Private Method를 구성 할 수 있다.

• 자바 스크립트 내에서는 다른 언어와 달리 메서드를 Private Method 형태로 선언 할 수 있는 기능을 제공하지 않습니다.
• 그렇기에 이와 비슷한 형태로 정보의 접근을 제한하는 캡슐화를 클로저 개념을 이용해 구성 가능

1.2 상태 유지

• 클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용 할 수 있기에 이러한 특성을 이용하여 특정 데이터를 스코프 안에 두고 계속 최신 상태로 유지하여 사용 가능
• 즉, 현재 상태를 기억하고 있다가 상태가 변경되면 그것을 최신 상태로 유지하는 기능으로 사용합니다.
• React내에서는 상태 관리로 사용되는 useState가 이를 의미.

1.3 전역 변수의 사용 억제 - 모듈화에 유리

• 클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다.
• 이와 같이 함수의 재사용성을 극대화시켜 함수 하나를 독립적인 부품의 형태로 분리하는 것을 모듈화라고 한다.
• 클로저를 통해 데이터와 메소드를 묶어 다닐 수 있기에 클로저는 모듈화에 유리하다.

 

 

출처 https://adjh54.tistory.com/64