본문 바로가기

Front-End/JavaScript

Closer

클로저 : 실행 컨텍스트가 정상적으로 제거(종료)되지 못하는 현상

 

function outerFunc() {
  let count = 0;

  return function innerFunc() {
    count++;
    console.log(count);
  };
}
const counter = outerFunc();
counter();
counter();
counter();
counter();

결과 :1,2,3,4

 

 

실행할 때마다 1씩 증가한다.

원래 자신의 차례가 끝나면 , 콜스택에서 본인은 제거되어야 한다.

근데 innerFunc 시점으로 보면, "outerFunc이 자신의 값을 참조하네?"

내 값 참조 안하면 버그가 되는데? => 그럼 나 못사라지는데? => 값이 메모리에 남아야겠다.

이 현상이 "closer"가 된다.

(이 실행 컨텍스트가 정상적으로 제거되지 못하는 상황)

 

아니 근데 제거를 하긴 해야하는데, 저 innerFunc을 "임시보관"한다.

콜스택 자체에선 빼주되 메모리상 어딘가 보관을 해놔.

언제까지? => 나를 참조하는 놈이 삭제될 때까지.

 

클로저 현상이 계속 발생하면 메모리 누수가 생겨서 퍼포먼스에 문제가 생긴다.

의도적으로 클로저를 만들어서 사용했다면 ,  반드시 null값으로 만드는 코드를 작성해야 한다.

counter = null;

'Front-End > JavaScript' 카테고리의 다른 글

구조분해할당(Destructuring) {...rest}  (0) 2024.07.24
class , 생성자 함수 , 프로토타입 메서드  (0) 2024.07.19
깊은 복사,얕은 복사  (0) 2024.07.19
함수  (0) 2024.07.17
자료형 , 연산자  (0) 2024.07.17