클로저(Closure)

클로저(Closure)

• 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다.
• 예제 코드

function outter(){
    var title = 'coding everybody'; // 외부 함수
    return function(){  // 내부 함수
        alert(title);
    }
}
inner = outter(); // 결과값이 없다.
inner(); // 실행 결과는 alert(title);

 

• 클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

 

클로저를 이용해서 private Method 흉내내기

• 아래는 프라이빗 함수와 변수에 접근하는 퍼블릭 함수를 정의할 수 있는 클로저를 사용하는 방법을 보여주는 코드가 있다. 이렇게 클로저를 사용하는 것을 모듈 패턴이라 한다.

var counter = (function() { // 익명 함수 안에서 만들어진다
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return { // Return 객체
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();

console.log(counter.value()); // logs 0
counter.increment();
counter.increment();

// 클로져 바인딩 시키기
function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    (function() {
       var item = helpText[i];
       document.getElementById(item.id).onfocus = function() {
         showHelp(item.help);
       }
    })(); // 익명 클로저를 사용하여 바인딩할 수 있다.
  }
}

setupHelp();
console.log(counter.value()); // logs 2
counter.decrement();
console.log(counter.value()); // logs 1

 

Let 키워드 사용하기

• let 키워드를 사용하면 블록 범위 변수를 바인딩함으로써 추가적인 클로저를 사용하지 않아도 된다.

function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    let item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();

 

Reference

• https://opentutorials.org/course/743/6544
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

 

 

2020/05/29 - [개발노트] - QR 코드 결제 타입

2020/05/29 - [iOS/Objective-C] - Objective-C Block Syntax

2020/05/29 - [iOS/Objective-C] - Detect permission of camera in iOS

2020/05/29 - [iOS/Swift] - WKWebView에서 history back 처리

2020/05/29 - [iOS/Objective-C] - OpenGL ES View Snapshot

2020/05/29 - [iOS/Objective-C] - Merge two different images in swift

2020/05/29 - [프로그래밍/C, C++] - Base64 encode / decode in C++

2020/05/29 - [OS/Mac OS X] - iPhone SDK location on hard drive

2020/05/29 - [iOS/Objective-C] - NSString <-> CBUUID 변환

2020/05/29 - [개발노트] - HTTP Content-Type

2020/05/28 - [iOS/Swift] - SEED 블록암호 알고리즘 CBC (Cipher Block Chaining) 예제

2020/05/28 - [개발노트] - HMAC SHA256

2020/05/26 - [iOS/Swift] - Array <-> Data 변환

2020/05/25 - [분류 전체보기] - UserAgent 추가

2020/05/25 - [iOS/Swift] - RSA 암호화 / 복호화