자바스크립트 기본 - 클로저
클로저 - https://opentutorials.org/course/743/6544
클로저(closure)는 내부함수가 외부함수의 맥락에 접근 할 수 있을 것을 가르킨다.
함수안에서만 사용되는 함수를 선언할 때 외부함수, 내부함수를 이용하여 사용한다.
function outter(){
function inner(){
var title = 'coding everybody'; //내부함수에 정의되어 있는 지역변수이다.
alert(title);
}
inner();
}
outter();
outter는 외부함수, inner는 내부함수이다.
아래는 클로저의 코드예제이다.
function outter(){
var title = 'coding everybody'; //외부함수에 정의되어 있는 지역변수이나 내부함수에서 사용할 수 있다. 이러한 것을 클로저라고 한다.
function inner(){
alert(title);
}
inner();
}
outter();
외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 가지고 있다.
function outter(){ //outter라는 외부함수를 지정
var title = 'coding everybody';
return function(){ //내부함수를 정의하고 리턴하고 있다.
alert(title);
}
}
inner = outter(); //외부함수가 종료되었지만 외부함수의 title에 접근할 수 있다.
inner();
Private variable : 정보를 아무나 수정하지 못하도록 하는것이다.
function factory_movie(title){ //외부함수가 실행되어 return값이 호출되면 함수는 끝났기 때문에 title에 접근이 불가하나 내부함수, 즉 메소드 get_title, set_title에 의해서 title의 값에 접근 할 수 있다.
return { //객체 안에 함수가 정의되어 있다. 메소들들은 내부함수이다.
get_title : function (){
return title; //내부함수에서 외부함수의 매게변수(지역변수)에 접근이 가능하다.
},
set_title : function(_title){
title = _title
}
}
}
ghost = factory_movie('Ghost in the shell'); //factory_movie의 return값을 ghost에 담는다.
matrix = factory_movie('Matrix'); //factory_movie의 return값을 ghost에 담는다.
alert(ghost.get_title()); //Ghost in the shell 알럿창
alert(matrix.get_title()); //Matrix 알럿창
ghost.set_title('공각기동대'); //ghost의 set_title을 바꾼다.
alert(ghost.get_title()); //공각기동대 알럿창
alert(matrix.get_title()); //Matrix 알럿창, ghost의 title만 바꾸었기 때문에 matrix의 title은 변하지 않는다.
private variable (비밀변수)로 title을 지정하는 것에 대한 장점은 아래와 같다.
title이라는 변수를 아무나 수정할 수 없다. title값을 외부에서 어떤 값으로 사용하든 factory_movie 함수안의 내용에 영향을 주지 않는다.
Private variable을 실수로 사용한 예
var arr = []
for(var i = 0; i < 5; i++){
arr[i] = function(){
return i;
}
}
for(var index in arr) {
console.log(arr[index]());
}
코드를 실행시키면 5가 5번나온다.
id라는 외부함수의 지역변수에 접근하여 i의 값을 올려주면서 값을 체크한다.
var arr = []
for(var i = 0; i < 5; i++){
arr[i] = function(id) {
return function(){
return id;
}
}(i);
}
for(var index in arr) {
console.log(arr[index]());
}
코드를 실행시키면 0,1,2,3,4 차례대로 나온다.