FrontEnd

JavaScript Closures

JJ-F-Developer 2024. 3. 20. 14:45

Closure

Javs Script

1. 클로저란?

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합입니다.

 

렉시컬 환경은 실행 콘텍스트의 구성 요소 중 하나인 outerEnvironmentReference에 해당하며, 변수의 유효 범위인 스코프를 결정하고 스코프 체인을 가능하게 합니다.

 

클로저의 예시를 한번 살펴봅시다.

Closure Example Code

 

어떤 컨텍스트콘텍스트 A에서 선언한 내부 함수 B의 실행 콘텍스트가 활성화된 시점에는 B의 outerEnvironmentReference(OE)가 참조하는 대상인 A의 Lexical Environment(LE)에도 접근이 가능합니다. 이로써 A에서는 B에서 선언한 변수에 접근할 수 없지만, B에서는 A에서 선언한 변수에 접근할 수 있게 됩니다. 자바스크립트의 렉시컬 스코핑은 변수의 범위가 소스 코드 내 위치에 의해 결정된다는 것을 뜻합니다.

 

간단히 말해, 변수는 정의된 블록 내에서만 접근 가능하며 중첩된 블록 내에서도 접근 가능합니다. 클로저는 함수가 다른 함수 내에서 정의되고, 내부 함수가 외부 함수의 스코프에 접근할 수 있으며 외부 함수가 실행을 마친 후에도 내부 함수가 해당 스코프에 접근할 수 있는 경우 실행됩니다.

 

하지만 클로저에서 주의해야 할 점은 내부 함수 B가 항상 A의 Lexical Environment를 사용하는 것이 아니라는 점입니다. 내부 함수에서 외부 변수를 참조하는 경우에 한해서만 선언될 당시의 Lexical Environment와의 상호관계가 의미를 가지게 됩니다.

 

 

2. 메모리와의 관련성

클로저와 메모리 간의 관계는 자바스크립트 프로그래밍에서 중요한 측면 중 하나입니다.

 

클로저는 외부 함수의 변수에 대한 참조를 유지하며, 이로 인해 메모리 관리에 주의해야 합니다. 클로저가 생성될 때 외부 함수의 변수에 대한 참조를 유지하기 때문에 해당 변수와 그에 연결된 메모리는 가비지 컬렉션될 수 없습니다.

 

이로 인해 클로저가 계속 유지되는 한 해당 변수와 메모리도 계속 유지되는 현상이 발생하며, 이를 클로저가 외부 스코프의 변수에 대한 '메모리 누수'를 발생시킨다고 말합니다.

 

2-1 메모리 누수 방지 전략

메모리 누수를 방지하기 위해서는 몇 가지 전략이 있습니다.

 

먼저, 클로저를 사용한 후에는 해당 클로저를 해제하여 더 이상 필요하지 않은 변수에 대한 참조를 제거하는 것이 중요합니다. 이렇게 하면 가비지 컬렉터가 해당 변수를 수거할 수 있게 됩니다.

 

또한, 클로저 내부에서는 외부 스코프의 변수보다 필요한 최소한의 변수만 사용하도록 제한하는 것도 중요합니다. 이렇게 하면 필요한 변수만 유지되고 메모리 누수 가능성이 줄어듭니다.

 

메모리 관리가 중요한 애플리케이션에서는 클로저가 메모리를 얼마나 사용하는지 프로파일링하고 모니터링하는 것이 좋습니다. 이를 통해 메모리 누수나 불필요한 메모리 사용을 식별하고 해결할 수 있습니다.

 

클로저를 사용할 때는 성능과 메모리 사용 간의 균형을 고려하여 최적화하는 것도 중요합니다. 클로저는 자바스크립트에서 객체지향과 함수형 프로그래밍을 아우르는 중요한 개념이기 때문입니다. 하지만 클로저를 사용할 때 메모리 누수에 대한 주의가 신경 써야 웹 성능을 충분히 향상할 수 있으면 이를 효과적으로 관리하기 위해 위에서 위에서 작성한 전략들을 고려해야 합니다.

 

메모리 소모는 클로저의 본질적인 특성이며, 이를 정확히 이해하고 잘 활용함으로써 효율적인 자바스크립트 코드를 작성할 수 있고 그 말은 즉, 클로저를 적절히 활용하면서 메모리 관리를 잘 다루는 것이 중요합니다.

3. Clouser의 활용성

 

클로저는 다양한 상황에서 사용될 수 있으며, 그 중 하나는 접근 권한 제어 또는 정보 은닉입니다.

 

정보 은닉은 어떤 모듈의 내부 로직에서 외부로의 노출을 최소화하기 위한 개념입니다.

일반적으로 접근 권한으로는 public, private, protected 세 가지 종류가 있습니다.

 

자바스크립트는 기본적으로 변수에 접근 권한을 직접 부여하는 기능을 제공하지 않습니다. 하지만 클로저를 이용하면 변수와 함수를 외부에서 접근할 수 없도록 은닉할 수 있습니다. 이를 통해 객체 지향 프로그래밍의 캡슐화와 비슷한 개념으로 코드의 안정성과 보안성을 높일 수 있습니다.

 

클로저를 사용하면 특정 범위에서 변수를 공유할 수 있습니다.

 

함수 내부에서 선언된 변수를 외부에서 접근할 수 없게 하면서도 해당 변수를 포함하는 함수 내부에서 여러 함수가 해당 변수를 공유할 수 있습니다. 이는 코드를 구조화하고 재사용성을 높이는 데 좋습니다.

 

콜백 함수와 이벤트 핸들러에서 자주 사용됩니다. 함수가 다른 함수에 인수로 전달되고 나중에 실행될 때 클로저를 형성하여 외부 스코프의 변수에 접근할 수 있습니다. 이를 통해 콜백 함수와 이벤트 핸들러가 자신의 콘텍스트 내에서 필요한 데이터에 접근할 수 있습니다.

 

비동기 작업을 관리하는 데에도 도움이 됩니다. 비동기 작업의 결과를 처리하는 콜백 함수 내에서 클로저를 사용하여 해당 작업과 관련된 데이터에 접근할 수 있습니다.

 

클로저를 사용하여 메모이제이션을 구현할 수 있습니다. 함수가 이전에 계산한 값을 캐시하고 나중에 동일한 입력에 대해 캐시 된 값을 반환함으로써 성능을 향상할 수 있습니다.

 

클로저를 이용하여 상태를 변경하지 않고 입력에 따라 일관된 결과를 반환하는 순수 함수를 생성할 수 있습니다. 이는 함수형 프로그래밍의 핵심 원칙 중 하나입니다.

 

이렇게 종합적으로 보면 클로저는 접근 권한 제어, 정보 은닉, 데이터 공유, 콜백 함수 및 이벤트 핸들러, 비동기 작업 관리, 메모이제이션, 순수 함수와 상태 관리 등 다양한 상황에서 유용하게 사용될 수 있습니다. 이러한 클로저의 활용은 코드의 구조화, 재사용성, 성능 향상 등을 기대 할 수 있습니다.

 

React 개발자라면 가장 친숙한 State의 getter 와 setter의 경우도 이 Closer의 원리로 이루어집니다!

 

클로저는 자바스크립트에서 매우 강력한 개념으로 활용되며, 변수의 유효 범위와 접근성을 효과적으로 조절하는 데에 사용됩니다.

 

이를 통해 개발자들이 코드의 모듈화, 정보 은닉, 비동기 처리 등 다양한 기능을 구현할 수 있습니다.