클로저(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 변환
'개발 > iOS' 카테고리의 다른 글
| WKWebView (0) | 2020.06.01 |
|---|---|
| 네비게이션바 투명 처리 (0) | 2020.05.29 |
| Objective-C Block Syntax (0) | 2020.05.29 |
| Detect permission of camera in iOS (0) | 2020.05.29 |
| WKWebView에서 history back 처리 (0) | 2020.05.29 |
SKY STORY