Closure

Closure란

• MDN: 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’.

• 간략히: 내부 함수가 외부 함수의 변수를 접근하는 것

  • 예시

  function getClosure() {
      let freeVar = 'independent'
      return function() {
          return freeVar;
      }
  }
  
  let closure = getClosure();
  console.log(closure());

목적

• 변수 숨기기

  • 객체지향 예시

  // 자바스크립트 객체지향 프로그래밍에서 변수를 숨기고 싶지만 외부에서 변수 접근이 가능
  function Person(name) {
      this._name = name;
  }
  
  Person.prototype.sayHi = function() {
      console.log('hi!, my name is ' + this._name);
  }
  
  var david = new Person('david');
  david.sayHi(); // 'hi! my name is david' 출력
  
  david._name = 'philip';
  david.sayHi(); // 'hi! my name is Philip' 출력

  // closure를 통한 변수 private
  function sayHi(name) {
      let _name = name;
      return function() {
          console.log('he!, my name is ' + _name);
      }
  }
  
  let david = sayHi('david');
  david(); // 'hi! my name is david' 출력
  
  david._name = 'philip';
  david(); // 'hi! my name is david' 출력

• 반복문 변수값

  • 문제

  let i;
  
  for (i = 0; i < 10; i++) {
      setTimeout(function() {
          console.log(i);
      }, 100)
  }
  // 10, 10, 10, 10 ... 10 출력

  • 해결

  let i;
  
  for (i = 0; i < 10; i++) {
      (function(j) {
          setTimeout(function() {
              console.log(j);
          }, 100)
      })(i)
  }