# 클로저

## 클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.

### 내부함수

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

```javascript
function outter(){ // outter 은 외부함수 
 var title = 'coding everybody';  
    function inner(){
        var title = 'coding everybody'; 
        alert(title);
    }
    inner(); // inner 내부함수
}
outter(); // coding everybody
```

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

### 클로저

**클로저(closure)**는 내부함수와 밀접한 관계를 가지고 있는 주제다. **내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저**라고 한다.

```javascript
function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
        /*return을 했기때문에 외부 함수가 종료 되었지만 클로저는 
          내부함수가 종료될때까 소멸하지 않는다는 특징이 있다. 
        */
    }
}
inner = outter();
inner(); // coding everybody
```

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

```javascript
function factory_movie(title){
    return {
        get_title : function (){
            return title;
        },
        set_title : function(_title){
            title = _title
        }
    }
}
ghost = factory_movie('Ghost in the shell'); //Ghost in the shell
matrix = factory_movie('Matrix'); // Matrix
 
alert(ghost.get_title());
alert(matrix.get_title());
 
ghost.set_title('공각기동대');
 
alert(ghost.get_title()); 
alert(matrix.get_title()); 
// 실행결과는 Ghost in the shell -> Matrix -> 공각기동대 -> Matrix 이다.
```

![](/files/-M_Fg3Fb24bSWFpHFGMy)

![](/files/-M_FgJkoxedt7Ww2ghPS)

![](/files/-M_Fgve53H3MO67BIVUP)

1. 클로저는 객체의 메소드에서도 사용할 수 있다. 위의 예제는 함수의 리턴값으로 객체를 반환하고 있다. 이 객체는 메소드 get\_title과 set\_title을 가지고 있다. 이 메소드들은 외부함수인 factory\_movie의 인자값으로 전달된 지역변수 title을 사용하고 있다.
2. 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다. 17행에서 실행된 set\_title은 외부함수 factory\_movie의 지역변수 title의 값을 '공각기동대'로 변경했다. 19행에서 ghost.get\_title();의 값이 '공각기동대'인 것은 set\_title와 get\_title 함수가 title의 값을 공유하고 있다는 의미다.
3. 그런데 똑같은 외부함수 factory\_movie를 공유하고 있는 ghost와 matrix의 get\_title의 결과는 서로 각각 다르다. 그것은 외부함수가 실행될 때마다 새로운 지역변수를 포함하는 클로저가 생성되기 때문에 ghost와 matrix는 서로 완전히 독립된 객체가 된다.
4. factory\_movie의 지역변수 title은 2행에서 정의된 객체의 메소드에서만 접근 할 수 있는 값이다. 이 말은 title의 값을 읽고 수정 할 수 있는 것은 factory\_movie 메소드를 통해서 만들어진 객체 뿐이라는 의미다. JavaScript는 기본적으로 Private한 속성을 지원하지 않는데, 클로저의 이러한 특성을 이용해서 Private한 속성을 사용할 수 있게된다.

참고 **Private 속성은 객체의 외부에서는 접근 할 수 없는 외부에 감춰진 속성이나 메소드를 의미**한다. 이를 통해서 **객체의 내부에서만 사용해야 하는 값이 노출됨으로서 생길 수 있는 오류를 줄일 수 있다.** 자바와 같은 언어에서는 이러한 특성을 언어 문법 차원에서 지원하고 있다.

### 클로저 자주 일어나는 실수

```javascript
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 
}
```

0부 4까지 출력되게 하려면 이렇게 수정하면 된다.

```javascript
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]());
}
```

![](/files/-M_FjYp6xclP4VvekvRb)

**내부함수가 지역변수에 접근할 수 있었고 함수가 만들어지는 시점에   id 라는 값을 가지고 있기때문에 id값을 리턴해줌**&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/undefined-13/undefined-10/undefined-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.