Chapter 7: Using Closures - hochan222/Everything-in-JavaScript GitHub Wiki

See the Closure

클로저는 함수에만 있다. 객체와 클래스는 클로저를 갖을 수 없습니다.

Pointed Closure

=> 화살표함수는 범위를 생성합니다.

var student = students.find( 
  student =>
    // function scope: ORANGE(4)
    student.id == studentID
);

이렇게 => 화살표 함수 내에서도 studentID 를 참조할 수 있으므로 클로저가 유지 될 수 있음을 알아야합니다.

Adding Up Closures

클로저는 컴파일 타임에 처리되는 어휘 범위를 기반으로하지만 클로저는 함수 인스턴스의 런타임 특성으로 관찰됩니다.

Live Link, Not a Snapshot

클로저는 실제로 전체 변수 자체에 대한 액세스를 유지하는 라이브 링크입니다. 닫힌 변수도 업데이트(재 할당) 할 수 있습니다.

클로저는 변수가 아닌 값을 지향합니다.

var keeps = [];

for (var i = 0; i < 3; i++) { 
  keeps[i] = function keepI(){
    // closure over `i`
  return i; 
  };
}

keeps[0](); // 3 -- WHY!?
keeps[1](); // 3
keeps[2](); // 3

이 세개의 클로저는 각각 다른 함수를 갖지만 같은 변수를 공유합니다.
함수마다 다른 변수를 만들면 예상 동작이 됩니다.

var keeps = [];

for (var i = 0; i < 3; i++) {
  // new `j` created each iteration, which gets 
  // a copy of the value of `i` at this moment 
  let j = i;

  // the `i` here isn't being closed over, so 
  // it's fine to immediately use its current 
  // value in each loop iteration
  keeps[i] = function keepEachJ(){
    // close over `j`, not `i`!
    return j; 
  };
}

keeps[0](); // 0
keeps[1](); // 1
keeps[2](); // 2

What If I Can’t See It?

function lookupStudent(studentID) { 
  return function nobody(){
    var msg = "Nobody's here yet.";
    console.log(msg); 
  };
}

var student = lookupStudent(112);

student();
// Nobody's here yet.

GC는 studentID가 더이상 호출되지 않으므로 정리하려 할것입니다.

function greetStudent(studentName) { 
  return function greeting(){
    console.log(
    `Hello, ${ studentName }!`
    ); 
  };
}

greetStudent("Kyle");

여기서 반환 된 함수는 버려집니다. 따라서 기술적으로 JS 엔진이 잠깐 동안 클로저를 생성하더라도 이 프로그램에서는 의미있는 방식으로 관찰되지 않았습니다.

따라서 이 절에 있는 모든 예제는 클로저가 아닙니다.

Observable Definition

클로저는 함수에서 접근할 수 없는 동안에 바깥 범위에서 변수를 사용하는 것입니다.

• 함수에 포함되어야 합니다.
• 밖의 Scope에서 적어도 하나의 변수가 참조되어야 합니다.
• 범위 밖 체인에서 다른 분기에서 호출되어야 합니다.

The Closure Lifecycle and Garbage Collection (GC)

클로저는 본질적으로 함수 인스턴스에 연결되어 있기 때문에 변수에 대한 클로저는 해당 함수에 대한 참조가 있는 한 지속됩니다. 최종 함수 참조가 삭제되면 해당 변수에 대한 마지막 클로저가 사라지고 변수 자체가 GC됩니다.

클로저는 시간이 지남에 따라 메모리 사용량이 급증하는 변수의 GC를 예기치 않게 방지 할 수 있습니다. 그렇기 때문에 더 이상 필요하지 않을 때 함수 참조 (및 그에 따른 클로저)를 버리는 것이 중요합니다.

Per Variable or Per Scope?

function storeStudentInfo(id,name,grade) { 
  return function getInfo(whichValue){
    // warning:
    // using `eval(..)` is a bad idea! 
    var val = eval(whichValue);
    return val;
  }; 
}

var info = storeStudentInfo(73,"Suzy",87);

info("name");
// Suzy

info("grade");
// 87

개념적으로 클로저는 범위가 아닌 변수 별로 이루어집니다. Ajax 콜백, 이벤트 핸들러 및 기타 모든 형태의 함수 클로저는 일반적으로 명시 적으로 참조하는 항목 만 닫는 것으로 간주됩니다.

많은 최신 JS 엔진은 명시적으로 참조되지 않은 클로저 범위에서 모든 변수를 제거하는 최적화를 적용합니다. 그러나 eval(..)에서 볼 수 있듯이 이러한 최적화를 적용 할 수없는 상황이 있으며 클로저 범위에는 모든 원래 변수가 계속 포함됩니다.

몇 년 전까지 만해도 많은 JS 엔진이이 최적화를 적용하지 않았습니다. 웹 사이트가 이러한 브라우저, 특히 구형 또는 저가형 기기에서 계속 실행될 수 있습니다. 즉, 이벤트 핸들러와 같은 수명이 긴 클로저가 우리가 생각했던 것보다 훨씬 오래 메모리를 보유 할 수 있습니다. 사양이아니라 선택적 최적화라서 우리가 무분별하게 사용하면 안됩니다.

따라서 우리는 필요에 따라서는 명시적으로 이런 것들을 GC나 최적화에 의존하지 않고 코딩할 필요가 있다.

function manageStudentGrades(studentRecords) { 
  var grades = studentRecords.map(getGrade);
  
  // unset `studentRecords` to prevent unwanted 
  // memory retention in the closure 
  studentRecords = null;

  return addGrade;
  // ..
}

studentRecords = null; 로써 클로저에서 없애준다.

요약: 클로저를 통해 내부 변수를 참조하는 동안에는 내부 변수가 차지하는 메모리를 GC가 회수하지 않는다. 따라서 클로저 사용이 끝나면 참조를 제거하는 것이 좋다.