JS(자바스크립트)의 클로저에 대해 알아보자

클로저는 자바스크립트에서 알아야하는 중요한 개념이므로 정리해두고자 한다.

함수와 그 함수가 선언된 렉시컬 환경을 함께 기억하는 함수로써,

함수가 선언된 위치에서의 스코프(유효 범위)를 기억, 함수가 호출될 때 그 스코프에 접근할 수 있게 해준다.

이제 조금 더 자세하게 들어가보자!

---

클로저의 정의

클로저는 함수가 선언될 때의 렉시컬 스코프를 기억하고,

그 함수가 호출될 때 해당 스코프의 변수를 참조할 수 있는 개념

클로저는 보통 내부 함수가 외부 함수의 변수를 참조하는 경우에 형성된다.

예시코드

function outerFunction() {
    let outerVariable = "outside!";
    
    function innerFunction() {
        console.log(outerVariable);
    }
    
    return innerFunction;
}

const myInnerFunction = outerFunction();
myInnerFunction(); // "outside!"

1. outerFunction은 outerVariable이라는 변수를 가지고, innerFunction을 반환
2. innerFunction은 outerVariable을 참조 가능
3. outerFunction이 호출되어 반환된 innerFunction은 클로저를 형성
4. 외부 함수의 변수인 outerVariable에 접근

클로저의 메모리 관리

클로저를 사용할 때 주의해야 할 점 중 하나는 메모리 누수인데,

클로저는 참조를 유지하기 때문에, 필요하지 않은 클로저는 메모리에서 해제될 수 있도록 주의해야 한다.

아니면 계속 참조하고 있기에 메모리 누수가 발생할 수 있다.

클로저의 불필요한 참조를 null 값으로 해제하거나, 범위를 최소화, 이벤트 리스너를 해제하도록 하자

---

클로저는 함수의 스코프와 상태를 관리하는 데 유용하다

클로저를 잘 이해하고 활용하여, 효율적이고 모듈화된 코드를 작성할 수 있도록 노력하자!

또한 클로저를 사용할 때는 메모리 관리에 주의하고, 필요 없는 참조를 적절히 해제해주는 것이 중요하다가 오늘의 결론!