javascript 외부,내부함수 클로저

CHAN YE·2022년 10월 14일
0

1. 내부함수,외부함수

함수안의 또 다른 함수

function outter(){
    function inner(){
        var title = 'coding everybody'; 
        alert(title);
    }
    inner();
}
outter();

inner = 내부함수
outter = 외부함수


2. 클로저

내부함수는 외부함수의 지역변수&파라미터 에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다.

function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
    }
}
let inner = outter();
inner();

inner에는 outter의 리턴값인 alert를 출력하는 함수가 들어가있고 alert의 인자로는 외부함수outter의 지역변수가 들어있다. 결과적으로 inner에는 내부함수만 들어있기때문에 한번 사용된 외부함수의 지역변수는 소멸되는 것이 자연스럽지만 inner을 다시 실행시켰을때 외부함수의 지역변수인 'coding everybody'가 그대로 남아있는 것 을 확인할 수 있다.
즉 클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고, 외부함수의 지역변수는 내부함수가 남아있는 한 사라지지 않는 특성을 의미한다.


3. 클로저(private variable)

function factory_movie(title){
    return {
        get_title : function (){
            return title;
        },
        set_title : function(_title){
            title = _title
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');

console.log(ghost.get_title());//Ghost in the shell
console.log(matrix.get_title());//Matrix

ghost.set_title('공각기동대');

console.log(ghost.get_title()); //공각기동대
console.log(matrix.get_title());//Matrix
  • 클로저는 객체의 메소드에서도 사용가능
  • ghost와 matrix는 리턴값으로 두개의 메소드를 가지고 있는 객체를 받았다.
  • 내부함수(메소드)들은 외부함수의 지역변수&파라미터에 동일하게 접근하여 공유한다.
  • 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저생성

private속성은 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미, 객체의 내부에서만 사용해야 하는 값이 노출됨으로써 생길 수 있는 오류를 줄임

4. 클로저 응용

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,5,5,5

for에서 i는 지역변수가 아니라 전역변수이기 때문에
arr[i]에서는 정상적으로 0,1,2,3,4를 받아오지만 내부함수에서는 0,1,2,3,4,5최종적으로 5만 받아오게 됨

-클로저를 활용한 해결예시-

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

즉시실행함수의 인자로 전역변수 i를 넣고 그 파라미터를 내부함수에서 리턴한다. 클로저가 적용되어 0,1,2,3,4를 리턴하게된다.

profile
php웹개발자

0개의 댓글