[JS] 클로저(Closure)

 

 

 

 

 

 

 

▶  클로저란?

• 함수와 함수가 선언된 어휘적 환경(렉시컬 환경)의 조합
• 내부함수가 외부함수 변수에 접근 가능
• 자신이 생성될 때 외부 환경을 기억하는 함수

 

function init() {
    var name = "Mozilla"; 		// init에 의해 생성된 지역변수
    function displayName() { 		// 내부 함수, 클로저
        alert (name); 		// 부모 함수에서 선언된 변수를 사용
    }
    displayName();    
}
init();

displayName()이 호출 됐을 때, 외부 함수인 init()의 환경을 기억하기 때문에 내부 함수를 동작 시킬 때 외부 변수에 접근할 수 있다.

 

 

 

 

 

 

 

▶ 클로저 은닉화

• Information Hiding
• 외부로부터 데이터를 감추는 것
• 내부적으로만 사용해야 하는 경우

 

 

은닉화 되지 않은 코드

function printFunc(name) {
	this_browser = name;
}

printFunc.prototype.print = function() {
	console.log(this._browser);
}

var browser1 = new printFucn("크롬");
var browser2 = new printFucn("웨일");

browser1.print();
browser2.print();

browser1._browser = "모질라";	//쉽게 접근 가능
browser1.print();

* _언더바가 붙으면 내부적으로만 사용함을 의미

 

 

 

 

은닉화된 코드

function printFunc(name) {
	this_browser = name;
    function print() {
    	console.log(_browser);
    }
   return print; 
}

printFunc.prototype.print = function() {
	console.log(this._browser);
}

var browser1 = new printFucn("크롬");
var browser2 = new printFucn("웨일");

browser1.print();
browser2.print();

클로저를 통한 외부함수 변수를 private하게 지정하여 은닉화가 가능하며, 외부에서의 접근을 제한할 수 있다.