생활코딩 자바스크립트 기본 - 함수지향(클로저)

본 게시글은 인프런 강의 "생활코딩 - 자바스크립트(JavaScript) 기본"를 보고 공부한 내용을 정리하고 있습니다.

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/dashboard

[무료] 생활코딩 - 자바스크립트(JavaScript) 기본 - 인프런 | 강의

---

클로저

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

내부함수

자바스크립트는 함수 안에서 또다른 함수를 선언 할 수 있다.

function outter(){
    function inner(){
        var title = 'Hello world';
        document.write(title);
    }
    inner();
}
outter();

함수 outter의 내부에는 함수 inner가 정의 되어 있다. 함수inner가 정의 되어 있다. 함수 inner를 내부 함수라고 한다.

내붛마수는 외부함수의 지역변수에 접근할 수 있다.

결과는 Hello world이다.

 

function outter2(){
    var title = 'Hello world';
    function inner2(){
        document.write(title);
    }
    inner2()
}
outter2();

외부함수에서 title이라는 변수가 지정되어 있다.

 다음을 실행하면 Hello world가 출력됩니다.

내부함수inner에서 title을 호출 했을 때 외부함수 outter의 지역변수에 접근 할 수 있다.

 

function outter(){
    var title = 'Hello world';
    return function (){
        document.write(title);
    }
}
var inner = outter();
inner();

다음을 실행하면 Hello world가 출력되다.

7행에 inner에 outter함수가 담긴다. 7행이 끝나고 외부함수의 지역변수title은 소멸되어도 되었지만,

8행에서 inner가 실행 되었을때, Hello world가 출력되는 것을 보아 title은 소멸되지 않았음을 알수 있다.

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

 

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');

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

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

alert(ghost.get_title());   //공각기동대 
alert(matrix.get_title());  //Matrix

Ghost in the shell - Matrix - 공각기동대 - Matrix 순서로 출력 된다.

factory_movie는 함수릐 리턴값을 객체로 반환하고 있다.

객체는 메소드 get_title, set_title을 가지고 있다. 이  메소드들은 외부함수인 factory_movie의 인자값으로 전달된 지역변수 title을 사용하고 있다.

 

ghost.set_title('공각기동대') 이후 ghost.get_title을 출력하면 공각기동대가 출력된다.

이는 set_title과 get_title이 함수 title의 값을 공유하고 있다는 의미이다.

 

하지마 matrix.get_title은 Matrix를 출력한다.

이는 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문이다.

ghost와 matrix는 서로 독립된다.

 

자바스크립트는 기본적으로 private속성을 지원하지 않지만, 이러한 클로저의 특징으로 private하게 사용할수 있다.

 

var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    document.write(arr[index]());
}

다음을 실행하면 01234가 나오길 기대하지만, 55555가 나온다.

var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(id){
        return function (){
            return id;
        }
    }(i);
}
for(var index in arr) {
    document.write(index+" : "+arr[index]()+"<br>");
}

이렇게 해야 원하는 결과를 얻을 수 있다.