클로져란, 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.
클로져의 특징으로는 정보 은닉, 상태 유지, 데이터 무결성 유지 등이 있고,
외부 함수가 내부 함수에 접근 하지 못 하는데 이를 통해 정보 은닉, 데이터 무결성 유지가 가능하다.
내부 함수는 외부 함수에 접근할 수 있고, 외부 함수가 동작이 끝나도 내부 함수는 외부 함수에 접근이 가능하다.
이를 통해 상태 유지가 가능하다.
내가 알고 있던 클로져의 내용
클로져란, 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.
클로져의 특성으로는 정보 은닉, 상태유지, 데이터 무결성 유지 등이 있다.
외부 함수가 내부 함수에 접근 하지 못 하기 때문에 정보 은닉이 가능하고,
내부 함수는 외부 함수에 접근할 수 있고, 외부 함수가 동작이 끝나도 내부 함수는 외부 함수의 변수에 계속 접근할 수 있다. 이를 통해 상태 유지가 가능하다.
외부에서 변수에 직접 접근하지 못하여 데이터의 무결성을 유지할 수 있다.
function outer () {
let count = 0;
function inner () {
count++;
console.log(count);
}
return inner
}
const increase = outer();
increase(); // 1
increase(); // 2
increase(); // 3위의 코드에서 inner 함수는 outer 함수가 종료된 후에도 outer 함수에 있는 변수 count에 접근이 가능하다.
이러한 방식으로 클로저는 상태 유지를 가능하게 하며, 외부에서 count 변수에 접근할 수 없으므로 정보 은닉, 데이터 무결성을 유지할 수 있다.
이러한 클로져의 문제점으로는 디버깅 어려움, 메모리 누수, 성능 문제 등이 있다.
디버깅 어려움: 클로져의 코드는 복잡성을 증가시켜서 가독성이 떨어지기 때문에 디버깅이 어렵고, 클로져 내부의 변수가 의도치 않게 변경되었을 때 원인을 추적하는데 어려움이 있을 수 있다.
메모리 누수: 자바스크립트 엔진에는 메모리 관리를 위한 가비지 컬렉터가 있는데 가비지 컬렉터는 더 이상 참조되지 않는 객체를 자동으로 메모리에서 해제하는 역할이다. 하지만 클로저의 경우에는 내부 함수가 외부 함수의 변수를 참조할 수 있어서 가비지 컬렉터가 해당 변수를 해제하지 못 하기 때문에 메모리 누수가 발생할 수 있다. 클로저를 사용할 때는 불필요한 참조를 명시적으로 제거하여 메모리 누수를 방지할 수 있다.
성능 문제: 많은 수의 클로져를 생성하거나 깊이 중첩된 클로져를 사용할 경우 자바스크립트 엔진이 클로져를 처리하는데 많은 리소스를 소비하게 되어 성능에 영향을 미친다.
위의 예제 코드가 일반적으로 클로져를 검색했을 때 많이 나오는 예제인데 이걸 보고 생각난게 useState Hook이다.
그와 관련해서 정리가 잘된 글이 있어서 링크로 남긴다.
댓글