남현준 질문

• 아래의 예시에서, (1)과 (2) 중 클로저는 어디에 존재하나요? 어느 한 쪽이 클로저를 사용하지 않았다면, 둘 간의 차이는 무엇인지 설명해주세요.

const nations = ["usa", "china", "japan"];
const ul = document.createElement("ul");    

nations.forEach(function (nation) {             // (1)
  const li = document.createElement("li");     
  li.innerText = nation;
  li.addEventListener("click", function () {    // (2)
    alert("selected nation is" + nation);
  });
  ul.appendChild(li);
});

document.body.appendChild(ul);

A:

• 클로저는 (2)에서 발생한다.
  • (1)은 forEach 메서드를 사용하여 배열 nations의 각 요소에 대해 콜백함수를 실행.
    • 이것은 콜백함수가 아니라, forEach 함수의 콜백 내부에서 변수를 선언한 것 뿐.
  • (2)은 ‘li’ 변수를 생성한 블록 내에서 이벤트 리스너 함수를 정의한 부분. 클로저 발생
    • nation 변수를 참조하고 있고, nation 변수는 외부 함수 forEach 콜백 함수의 스코프에 있다. 즉, 자신이 정의된 함수 내부에서 외부 스코프에 있는 변수 nation에 접근하고 있기 때문에, 클로저가 형성되게 된다.
      • li 요소를 클릭할 때마다 , nation 변수를 참조하고, 클릭된 li의 국가를 alert한다.

이영욱 질문

• 클로저를 이용해 메모리 상에 존재하는 변수는 왜 접근 불가능한지 실행 컨텍스트를 이용해 설명해주세요.

A:

• 클로저가 더이상 사용되지 않고, 클로저가 메모리에서 제거될 때, 클로저에 의해 참조되던 외부 변수들도 더이상 사용되지 않게 된다. 이때 GC에 의해 클로저와 클로저가 참조하는 외부 변수들이 메모리에서 해제 되고, 이후에 변수들에 접근이 불가능하게 된다.
• 만약 클로저가 아직 사용 중이라면, 외부 변수에 접근할 수 있게 된다.
• 클로저가 생성될 때, 클로저는 자체적인 실행 컨텍스트를 생성. 이것은 해당 클로저 내부 함수가 실행되는 환경을 의미. 그리고 스코프 체인을 통해 외부 스코프 변수에 접근할 수 있게 되고, 전역 스코프까지 확장될 수 있다.

김특희 질문

• 클로저에 대해 간략하게 설명해주시고, 클로저가 가비지 컬렉터의 동작 방식과 어떻게 관련되는지 설명해주세요\

A:

클로저는 함수가 다른 함수 내부에서 정의되고, 이 내부 함수가 외부 함수의 변수에 접근할 때 발생하는 것이다. 내부 함수가 외부 함수의 LE , 스코프를 유지하고 해당 스코프에 있는 변수를 계속 사용할 수 있게 된다.

만약, 클로저 내부에서 사용하는 변수들이 더이상 필요하지 않게 된다면, 이 변수들은 메모리를 계속 차지하게 되는데, 이런 상황에 GC의 동작이 중요하다.

GC는 사용되지 않는 메모리를 자동 식별하고, 해제하는 역할을 하는데, 메모리 누수 방지 및 메모리 사용 최적화의 역할을 하게 된다.

하지만 만약 클로저가 존재하고, 그 클로저가 외부 스코프에 있는 변수에 접근 하고 있다면, 해당 변수는 GC의 대상이 되지 않는데,

즉, 클로저가 더이상 필요하지 않게 될 때, 클로저 자체 또는, 그 클로저가 참조하는 변수에 닿을 수 없게 되어야 GC에 의해 메모리에서 해제가 된다.

즉, 클로저의 사용 방식 및 수명 체크를 하여, GC가 메모리를 효율적으로 관리할 수 있게 해야 한다.